I'm following this tutorial on how to use DevTools to insert breakpoints. I've opened the example page and have added a breakpoint on the click event, as in part 2 of the tutorial.
However, when I click the button, DevTools does not highlight function onClick() { in the get-started.js file, as the tutorial says it will. Instead, it highlights a minified function in a minified file (end.min.js):
Why is this happening? And how can I fix it? I would like to follow the tutorial, but it's pretty difficult with the breakpoint being added to the minified file.
I am not sure where end.min.js is even coming from: the Network tab doesn't show it being loaded. I'm not sure if it's related, but when I try to view the source of the page, Chrome shows the "loading" icon forever.
Is Chrome doing something clever with
It seems like an extension (I'd say a password manager) is adding event listeners too, and your breakpoint first catches this listener.
You can either test with the extension disabled (you may need to refresh the page), or just press "Resume" to go to the next listener.
Are you sure you're following the tutorial? I have followed this:
DevTools lets you pause your code in the middle of its execution, and
examine the values of all variables at that moment in time. The tool
for pausing your code is called a breakpoint. Try it now:
Go back to the demo and open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
Click the Sources tab.
Click Event Listener Breakpoints to expand the section. DevTools
reveals a list of expandable event categories, such as Animation and
Clipboard.
Next to the Mouse event category, click Expand
Check the
click checkbox.
And the expected error shows:
Also you have to activate pause on caught exceptions, and seeing the image that you have provided it seems like you don't have that activated.
But I see if you open DevTools when you reload the page, another error pops up, maybe if you close DevTools, reload the page and try again?
Related
With Chrome DevTools open I can place a breakpoint in a Javascript file and step through the code displayed in the "Sources" tab as it executes. The problem is that every time I hover over a variable I get an unwanted tooltip that pops up with the value of that variable.
For example if a section of code is let a = 1; then any time my cursor happens to pass over a I get a popup displaying 1. Some variables such as DOM elements can be quite large and frequently get in the way as I am trying to look at the code. I find this annoying and would like to disable this feature. Is there a way to NEVER see these tooltips?
I want to see what code is modifying a DOM element on a webpage, so I set a breakpoint in Chrome by right-clicking on the element in the Elements tab of the DevTools inspector and choosing "Break on..." -> "Subtree Modifications". The script modifies the element when the page is loaded (and not after), so I want to preserve the DOM breakpoint and refresh the page.
The process for saving breakpoints in javascript code doesn't seem to apply to DOM breakpoints.
For now I added a debugger; line before any other code runs, added a DOM breakpoint, and continued.
In Chrome, DOM breakpoints are not preserved upon refresh, they are thrown away, and then restored after the onload event. See bug report 571519, and this comment from that report:
We are preserving DOM breakpoints upon reload, but the breakpoints are only restored upon onload event. So if you expect breakpoint to trigger before that or it is set on a node that is added lazily, breakpoint is not restored. We should fix that though.
This is the workaround:
pause the Javascript, either with a normal breakpoint or with debugger; line of Javascript
remove all DOM breakpoints and add the DOM breakpoints that are needed
resume.
I believe this didn't have a proper explanation for the answer because I face the issue as well. the steps goes as follows.
open developer tools by pressing console f12,
you need to try to slow down your webpage rendering so you can be able to quickly pause javascript execution, the trick I use is to go to the network tab and set the online drop-down field to slow 3G so the pages become slower to render.
select the sources tab then on the left sidebar check breakpoints and make sure all break points are removed, if there are still some breakpoints set then remove them
click on the pause execution button on your
go back to your webpage and reload it, with the network set as slow 3g, your page becomes slower to render then you can quickly go back to sources and pause the execution the moment you can see your HTML dom is loaded. in this way your webpage is in a paused state
go to your element tab, find the element you want to set breakpoint on and set it. then go back to sources tab and click continue execution this will make the execution stop at your element's break point
I try to use console.timeStamp in firebug, it works:
console.timeStamp()
12:16:26.188
but this does't work in chrome, it show undefined
how can I use it?
The console.timeStamp function in Chrome differs greatly from the one in Firebug. Chrome uses it to add an event to the Timeline during a recording session whereas Firebug just creates a log in the console.
So for using timeStamp in chrome one has to start recording a Timeline session under the Timeline tab and the events then appear on the Timeline.
Note that the console.timeStampe() in Firebug doesn't only create a log within the Console panel, but it also creates a mark (vertical line) in the Net panel's time line.
See more: http://www.softwareishard.com/blog/firebug/firebug-1-8-console-timestamp/
Honza
In Chrome, write some code that calls console.timeStamp():
function test4(foo) {
console.timeStamp('Hello world!');
}
Then, open DevTools, go to Performance tab, and click Record (Ctrl + E), execute your code, and stop the recording. You will see this events under the Main section:
And you can use the Event Log section to search for instances of your console.timeStamp() events:
I am trying to understand how to get from the chrome debugger the following info : there is an event on page triggered by a click on an input file type tag. But it is impossible for me to trace back the mecanism : which js file is called when the event is triggered. Is there a way do get this info from the debugger ?
Do you have a look at the Event Listeners entry in the right-hand window? If I right-click the 'Google-Chrome' tag at the bottom of your post, and select Inspect Element, I get the html tag highlighted. If I then look in the right-hand pane at the Event Listeners, I can see that this element has handlers for blur, click, keyup, keydown, mousedown, mouseout, mouseover. Yet just looking at the html I can't see that. If I expand the event handlers, I can see that they all point to "jquery.min.js : 3". This is because the file has been minimized and is only 4 lines - each of which is probably 20 or 25,000 chars long. Minimized scripts are difficult to analyse unfortunately.
Try it with a page that doesn't use minimizes scripts and you can click the link in the event handler window to be taken directly to the pertinant function - unfortunately, you are taken to the start of the line concerned, which makes jquery.min.js a waste of time to do this with. You can always use the non-minified version of a script for debugging purposes, switching over to the minified version for production.
With other's pages, you can sometimes get away with saving a local copy, before linking an unminified version of the script.
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.