All:
I am pretty new to Chrome debug tool, I am wondering how can I find where is the event handler code located? For example, when I click something on the page, but I do not know where the click event handler function in the script( say it is a very long script and possibly minified), how can I set breakpoint to catch that so that I know where those code is?
Thanks
Related
We have addEventListener and removeEventListener.
Why we don't have getEventListeners?
Is this because of security reasons?
What will happen if listeners can be found in page context script?
I am trying to write a puppeteer script to trigger a div click event.
But I want to make sure there is an event listener on click-event before clicking it.
And I found that it is very difficult to check if a div has a event listener.
The puppeteer document tells me that to use DOMDebugger.getEventListeners in Devtools Protocol to achieve this.
I was wondering why the browser is designed like this.
I get this error in the Chrome console every time I try to evaluate an expression.
EvalError: Possible side-effect in debug-evaluate
What could be causing it?
I think I found the issue, reading through a discussion on an electron issues board.
It could potentially be caused by this: [inspector] Add custom error dispatch machinery for debug evaluate.
And hopefully fixed in this: [inspector] Don't trigger window.onerror with side-effects disabled.
This was an oversight in https://crrev.com/c/3557234, which led to a really weird developer experience: once a window.onerror handler was installed, typing into the Console or other side-effect free debug evaluations triggered this handler.
The website you are inspecting contains an onerror event listener.
A new bug in the latest version of Chrome triggers this event every time an expression is evaluated in DevTools. This includes live expressions and the console.
If this is your own website, add this line of JavaScript to your event listener to ignore any errors triggered outside of a script, where script is the second argument of the event listener function:
if(!script.endsWith(".js")) return;
Note that this will only work for external JavaScript (in .js files), in the case of JavaScript embedded in HTML <script> tags, it will disable your event listener entirely.
If this is not your website, you can temporarily disable the event listener in DevTools, like this:
At the top of DevTools, open the "Elements" tab
Press "»", on the right of "Styles", "Computed", "Layout"
Choose "Event listeners"
Find and expand "onerror"
Click "Remove"
This will remove the event listener, but the issue will return after you refresh the page.
Hopefully the next version of Chrome will fix this bug.
Image speaks for itself; this script is on the debugger's ignore list; yet every time I trigger this exception it is paused upon. I cannot uncheck Pause on caught exceptions because I am trying to pause on a caught exception in another startup script.
Devtools says The debugger will skip stepping through this script, and will not stop on exceptions, but it's doing just that, it is not skipping this script.
I've tried several things, like unignoring/reignoring. Using canary, etc. I have this problem on both my windows and osx machines; so it doesn't seem to be particularly related to my environment.
I am wondering if anyone else has run into this and found a workaround. Thank you.
Problem remains unsolved. Leaving this post here with some unsucessfull tentatives of mine, so someone can build something based on them.
1. Devtools extension API
It is possible to create an add-on that can reach the Developer Tools window and even reach the Sources tab, but once there all I could do was creating new sidepanels or attaching a listener to code text selection changes: chrome.devtools.panels.sources.onSelectionChanged.addListener((x)=>{console.log("onselectionchanged");console.dir(x);});
This API was not enough, could not reach debug status or any interesting sidepanel.
2. Debugging the debugger with a JS debugger
By hitting ctrl-shift-i or ctrl-shift-j over a devtools debug window it is possible to open another devtools debug window, debuging the first one. From there it is possible to write code that detects the banner informing that the file was supposed to be ignored and then click on the continue button:
function breakpointskipper() {
bnr = document.getElementById("sources-panel-sources-view").querySelector("div.vbox.flex-auto > div > div > div > div.flex-none > div");
if (!bnr) return;
bnr = bnr.shadowRoot;
if (!bnr) return;
bnr = bnr.querySelector("div");
if (bnr.ariaLabel != "This script is blackboxed in the debugger") return;
btn = document.querySelector("div.scripts-debug-toolbar.toolbar");
if (!btn) return;
btn = btn.shadowRoot;
if (!btn) return;
btn = btn.querySelector("div > button[aria-label=\"Resume script execution\"]");
if (!btn) return;
btn.click();
}
It is possible to even attach this breakpontskipper() button presser to an event in the devtools window and automate things, but as soon as you close the debugger being debugged window, it is all over and you have to recreate the code and reattach again. As said before, I wasn't able to make any add-on reach here.
3. Debugging the debugger with a native debugger
One last available option would be using GDB to debug the DevTools and change its behavior, in the chromium documentation it is shown that they have debug symbols available but I didn't try this approach.
Please try the troubleshooting help, and share some feedback. Also it would help greatly if you pasted some script here.
Please check if your script black boxed like here
Did you accidentally turn on - break on all exceptions see here
Force a hard refresh, i.e. clear you cache like here
Turn off all break points, then do a restore, try again.
More from ref. on chromium bug site
Update 1: Can you please verify/double check that your file to ignore is actually added to the ignore list.
If you know upfront which files to ignore, head over to Developer Tools > Settings (Cog Icon) > Ignore List. Then add a file name or regex pattern you wish to exclude.
You should see something like
In Chrome's web-developer tools one can break at any point by pressing F8.
Often times I would like to break and inspect an element during a drag and drop operation by pressing F8. This won't work however.
Is there a native Chrome-way shortcut without running a custom script?
No, devtools window has to be focused in order for keyboard shortcuts to work. While you're dragging an element, it is the dragged element that has the focus, not the devtools window. The best you can do is with a custom script.
Try setting a timeout in the console to trigger the debugger after 2s:
setTimeout(function(){debugger;}, 2000);
And then step out of that function.
Is there a native Chrome-way shortcut without running a custom script?
No. Without any extra steps the DevTools must be in focus for F8 to pause execution.
If you'd like to call debugger while DevTools is open but not in focus, you can attach an event listener for the F8 key in a couple ways. These will work when you are dragging an element and you want to pause script execution.
1) Open the console and manually run this script on the target site before debugging:
window.addEventListener('keydown', function(e){ if(e.key === 'F8') {debugger;} }, false);
This will attach an event listener for the F8 key which will trigger debugger.
2) Create a userscript for Tampermonkey which runs the above script on sites that you permit. Sample userscript:
// ==UserScript==
// #name F8 to debug
// #version 0.1
// #description Press F8 when the console is open to trigger 'debugger'
// #author Drakes
// #grant none
// #require none
// ==/UserScript==
console.log("Press F8 when the console is open to trigger 'debugger'");
function KeyCheck(e) {
if(e.key === 'F8') {
debugger;
}
}
window.addEventListener('keydown', KeyCheck, false);
I do have a better solution without changing anything on the code.
Below trick is valid on Chrome Webtools, and for others I haven't checked.
Steps to put debug on drag and drop or even on any event of your choice
Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints
You would see Drag / drop event! but before going further. Stop there. If we use this, we’ll get a breakpoint on the very moment a drag/drop event is called. We don’t really want that right
we want to pause the UI state at a moment of my choosing, perhaps while dragging over a particular element. So instead of drag/drop, check the Keyboard event box.
Now, drag whatever you like, and at the appropriate moment hit any key from the keyboard.
Finally we got one paused state. You can’t right click to inspect elements, but you can use the element selector tool - hit the button top left of the Dev Tools pane, or [Cmd/Ctrl] + [Shift] + [C] and point at the element you want to inspect.
NOTE: Don’t forget to uncheck the Event Listener Breakpoint when you
are done
Open dev tools and click f8 -> Open Dev Tools, jump to the sources tab, and check out the Event Listener Breakpoints -> click keyboard checkbox, something like below
enter image description here
We are developing a web application with javascript, we use chrome as our default browser for our users.
Now we met a problem when we use window.open in our application.
In our application, we need to open new page in a new browser tab, we used code : window.open('http://ourUrl.com', '_blank') in js code;
The action of the browser is different according to when this line of code is executed.
situation 1: user clicked a button, the click event will trigger our js function, in this function, execute this line of code directly, then the browser may open the page in a new browser tab. (this is what we want.)
situation 2: user clicked a button, in the handler of the button's click event, we firstly submit the data on page to our server via ajax, and in the callback function, we execute this line of code, it may pop an independent new window without tool bar instead of a browser tab.(this is not what we want).
I don't understand why the action of browser is different, anyone can help to explain?
Thanks.
As I explained on this question, in order for a URL to be opened in a new tab (not new window), the window.open function must be called within a scope of a user generated action callback (for example, within the scope of onClick)
In any other scenario, the URL will be opened in a new window.
To explain what you're experiencing:
Situation 1: window.open is invoked in a callback for a user generated action. That's why it's opened in a new tab.
Situation 2: In this situation, the window.open function is invoked in the scope of an ajax response callback, which is a different scope (outside the context of) the user generated action.
For the second scenario to open a new tab (instead of window) you need to call window.open synchronously, immediately after the user's click, and not as a callback of another action (ajax response).