如何以编程方式在chrome developer工具中禁用javascript？

Question

The other related question only states how to switch on/off JavaScript via the GUI Chrome provides. However, I want to toggle JavaScript programmatically from chrome console OR with a single key stroke (Such as tapping F12).

The reason I want this ability is because I am working on a web application which has a dropdown menu that I want to modify; I am not sure where in the codebase this dropdown menu is so I would like to pause execution and inspect it. Whenever I click on any of my developer tool options though to pause execution, it closes the dropdown menu.

A potential solution would be to simply put a debugger in the code where the dropdown menu is, but this is a chicken-and-egg problem because the whole point of pausing execution is to locate where in the codebase this drop down menu is.

Answer 1

You can write a simple Chrome extension to do what you want. Chrome provides a JavaScript API were you can allow or block JavaScript using contentSettings and the property you will need to set or unset is JavascriptContentSetting.

https://developer.chrome.com/extensions/contentSettings

https://developer.chrome.com/extensions/contentSettings#type-JavascriptContentSetting

To add the keyboard shortcut, you add it to the manifest as described here:

https://developer.chrome.com/extensions/commands

Just in case you have not built an extension before (don't worry, it is pretty easy), here is a walk-though on putting together your first:

https://developer.chrome.com/extensions/getstarted

Hope this helps.

Answer 2

In developer tools, you can right-click the node in the inspector tab and use the 'Force element state' sub-menu to simulate a mouse hover.

Also you should get a lot of event listeners in the form of file:line that you can work backwards from to locate the relevant code.

Also++, you can simulate events in JS How to simulate a mouse click using JavaScript?