I know that I can trigger "Pause script execution" action in Google Chrome DevTools by having DevTools open with Sources tab active and press F8.
However, this seems to move focus out from the content area triggering additional events and I'm trying to debug some code that listens focus and blur events in addition to other events I'm trying to debug.
What I would really need is ability to trigger the "Pause script execution" feature without pressing F8. The closest I can do is executing setTimeout(function(){ debugger; }, 2000); in the JS console but that will stop all JS processing instantly after 2 second delay. The feature I'd like to use from DevTools is ability to delay stopping until some code actually runs so that the event queue already has the next events when scripting is stopped. (I'm basically trying to figure out what events are already in the queue in some specific situations and any extra focus/blur events will mess that work.)
Is there a way to trigger "Pause script execution" without pressing F8 or clicking the GUI button because both mess with the focus events?
It seems that to fully handle all combinations of keyboard focus and focus/blur events you need to do some extra steps. I found that I can get correct events like this:
Open DevTools and the Sources tab.
Press Ctrl+Shift+P to open "Run command" action
Search for focus and run command Emulate a focused page (note that this is not a permanent toggle and you need to do this again in the future to debug similar stuff).
Now prepare the situation you would want to test (e.g. you're about to press some keyboard button next).
Click the pause button within the DevTools Sources tab with the mouse.
Press Ctrl+Shift+P again and search for focus and run command Focus debuggee.
The keyboard focus is now in the correct place and any JS code that would be executed will trigger the debugger with the correct event for the next keyboard action.
If you need to debug mouse events, follow the same list but instead of clicking the pause button with mouse, press F8 twice (single press doesn't work for me?), then Ctrl+Shift+P again and search for "focus" and run command Focus debuggee using the keyboard only. Do not move the mouse even a single pixel after pressing F8 until you have exeuted the Focus debuggee command, or the page will see mousemove and other mouse movement related events.
I have one custom toolbar buttons for the viewing 2d files. Clicking on same opens the panel for selecting file for comparison and loads the 'PixelCompare' extension. Once the operation is done, and when I click the 'Exit Comparing' toolbar button of PixelCompare, it doesn't show that extra custom toolbar button. Please suggest what is required. How can I handle the inbuilt extension unload. Thanks!
When I add mouse event breakpoint, devtools always jump into extension's JS.
Is there any way to point to my mouse event code directly?
The only way to disable the script (e.g. to avoid side-effects) is by disabling the extension (for instance, by using incognito mode if the extension is not enabled in incognito mode).
If you don't mind the scripts to run, but want to ignore extension code, then you can use the script blackboxing feature of Chrome's devtools.
If you never develop extensions and aren't interested in stepping through it, then open the settings menu of the devtools, click on Blackboxing and then the "Blackbox content scripts" checkbox:
If you only want to selectively ignore files, then you can also right-click on the source of the file that you want to ignore, and click on the "Blackbox Script" contextmenu option. To remove the pattern, go to the "Blackboxing" settings panel as shown before.
I think the simplest way is to open an incognito window (Ctrl-Shift-N) (or Cmd-Shift-N for mac) and debug in there, because then there will be no extensions loaded (by default).
I know what you mean by this question: when debugging, and doing something simple like pausing execution, you always find it breaks into one of the extension's codes instead of the current webpage's code.
open developer tools, then go to settings and then click on ignore list, and check the checkbox for add content script to ignore list, then add this to the ignore list: ^chrome-extension://
If you're using Google Chrome (or any Chromium-based browsers), simply run a new browser instance with a fresh user's data directory.
On Linux:
google-chrome --user-data-dir=$(mktemp -d)
This way, all extensions will be disabled without having to manually switch off/on them.
I like to use Profiles for that.
While changing into incognito mode might help you to disable most of the extensions, some of them might be allowed and still run. For example I have DarkReader and Ublock enabled in incognito mode.
My favorite workaround is to use a "Guest" profile or to create a profile that you can use for debugging. I think it is easier than creating a Framework Ignore List inside of devtools.
How to create a profile: https://support.google.com/chrome/answer/2364824
Example: My debugging profile
First off you should probably review the tutorial on how to debug chrome extensions here:
http://code.google.com/chrome/extensions/tut_debugging.html
When in doubt, you can always use the debugger keyword directly in the JavaScript code where you want to launch the debugger from, like so:
element.addEventListener("mouseover", function() {
debugger;
// some JS handler code...
});
Depending on if your JS is in a popup, background page, or in a content script, you will need make sure you launch the dev tools from the right place.
For a popup, you need to right click on the extension icon and "Inspect Popup" and then from the JavaScript console you would need to run location.reload(true)
For a background page, you need to go to the extensions settings page, chrome://settings/extensions, turn on developer mode, expand the extension in question and click the background page link.
The content script should be visible directly from the page it is loaded onto.
I want to make a chrome extension which performs a certain action when the user enters the a "back" navigation action.
ie: they click the back button in the browser, or they swipe backwards with 3 fingers on a macbook pro, or if they enter the shortcut alt + left arrow.
How can I detect these actions? Should I create some type of listener or handler which accounts for each one individually?
You can use the webNavigation API.
Start monitoring the details for each transition type that you mentioned. And then try to do something with this information.
chrome.experimental.webNavigation.onCommitted(function(details){
console.log(details);
});
I have a few extensions (with their icons up on the right). I'd like to assign a shortcut for activating each one of them, i.e. a shortcut that simulates clicking the mouse on them.
One extension e.g. is a dictionary and it would be more than useful to be able to open it without tinkering with the mouse.
There's a way to do this in chrome://extensions if you go to the bottom of the page and find "Configure commands" link.
I also am wondering about how to do this, and here is the possible solution suggested by Misha Kupriyanov:
https://plus.google.com/u/0/108214193841489989707/posts/2YBaEqRsCPw
You can take the Quick Disable Chrome extension by +Paul Kinlan (you can find the source on github)
It uses the chrome.management API http://code.google.com/chrome/extensions/management.html
and now you can write your own pageAction extension ;) = include on each page your JavaScript for catching keyboard events and triggering enable/disable events via chrome.management API
Also check out the Vimium (also open source) by Ilya Sukhar (i am not sure its his account)
Try Autohot, it's a free tool that makes it easy to automate that kind of things, easiest would be:
wait for your "keyboard shortcut" to be fired
check that google chrome is the active window
click on the fixed mouse coordinate to activate the extension