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:
Related
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.
This question is similar to How can I inspect disappearing element in a browser?, except it's the reverse.
I'm trying to debug which JS adds a bunch of rogue <iframe> aswift_1, aswift_2, etc. elements to the page, like so:
I'd like to use Chrome Devtools (or Firefox) to pause execution as soon as such an element is added and inspect the call stack, hopefully finding the culprit.
Other ideas are welcome as well.
You can use this simple chrome extension.
It will trigger the debugger AFTER element with id matching aswift_ is added(of course you need to open chrome dev tools first).
https://gist.github.com/maciejmackowiak/8043c8630004644144711f730ef45f1b
To activate this extension download -> unpack, open manifest.json and in line 8 change the example.com to the domain you want to inspect.
Then go to chrome://extensions/
Click on Developer mode and Load unpacked
When you will go to the page maching the domain this should show up after element with id starting with aswift_ is added:
Paused in debugger
Now you can use "step over next function call(F10)" (you may need to hit it few times before it will loop thru all mutations and "go" to another function)
Quickest way in chrome would be to take a look at either the network tab (for response) or do a global search using Ctrl+Shift+F on Windows and look for certain tags used in those elements which are being added to the DOM
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?
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
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.