How do I manually perform each subsequent request in Chrome DevTools? I mean add a breakpoint after each request automatically. For example, I would like to get the first row in the table below, then click some button and get the second row and so on...
You can setup an event listener on XHR/Fetch calls, which will pause the execution of the code when the browser makes a network request.
Notes:
Click the Sources tab > Expand the XHR Breakpoints pane.
Click Add breakpoint. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.
Press Enter to confirm.
More info:
https://www.canidev.tools/debug-xhr-fetch-calls/chrome
Related
I am learning how to make chrome extensions and for my extension to work on every tab i have added the following event listeners in background.js:
tabs.onActivated, tabs.onCreated, tabs.onUpdated, and browserAction.onClicked(this one is used to change the flag am sending in message every time the extension button is pressed)
for all these events i send a message to one of the content script js file and that file changes some content according to the recieved message.
Problem is: If i start chrome and the extension isn't active yet, on activating the extension i need to refresh all the opened tabs for it to work otherwise it doesn't send any messages to the content script of the opened tabs, even on clicking the extension icon.
Is there a way by which the extension can start working immediately as i start it without the need of refresh?
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?
I'm using the next code in my eventPage.js (backgroundPage replacement by google) and I'm facing some weird inconsistency.
This is the scenario:
First Machine:
Opening new tab ->
onActivated
onUpdated
onUpdated
onUpdated
Entering URL ->
onUpdated
onUpdated
entering another URL ->
onUpdated
onUpdated
Second Machine:
Opening new tab ->
onActivated
Entering URL
onReplaced
onActivated
entering another URL
onReplaced
onActivated
This is my code:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab)
{
console.log("onUpdated");
});
chrome.tabs.onActivated.addListener(function(tabId, changeInfo, tab)
{
console.log("onActivated");
});
chrome.tabs.onReplaced.addListener(function(tabId, changeInfo, tab)
{
console.log("onReplaced");
});
After a lot of debugging I've found that the cause of this difference is the option "Predict network actions to improve page load performance" in Google Chrome Settings.
In the first machine the option above is not selected and is working as expected.
Is that expected behavior for the second machine?
From the documentation I can somehow understand the onReplaced status:
Fired when a tab is replaced with another tab due to prerendering or
instant.
Although it is very poorly documented and there's no way knowing that that option is somehow related to the onUpdated onReplaced statuses but I really don't understand the onActivated statuses in the second machine and why there's a difference between the first machine and the second machine.
I couldn't find any documentation about this behavior on the web. On stackoverflow I could hardly find one question that mentions the onReplaced listener but didn't had any info I can use.
Thanks
Having the "Predict network actions..." option checked, causes Chrome to try to predict your next action (i.e. what resource or page you are likely to request next) and load it in the background (before you make the request). As soon as you do actually request that resource or page, Chrome will not have to first load it and then serve it to you; rather it just serves the pre-loaded instance. This improves performance (as long as the prediction of your next actions is accurate).
To serve a pre-loaded page, Chrome replaces the current tab (that's when the onReplaced is triggered) with a tab that has the page already loaded in the background (the replacing tab becomes active, thus the onActivated event). Because the content has been loaded in the replacing tab beforehand, there is no onUpdated event.
From Chrome's whitepaper on prerender:
Prerendering extends the concept of prefetching. Instead of just downloading the top-level resource, it does all of the work necessary to show the page to the user—without actually showing it until the user clicks. Prerendering behaves similarly to if a user middle-clicked on a link on a page (opening it in a background tab) and then later switched to that tab. However, in prerendering, that “background tab” is totally hidden from the user, and when the user clicks, its contents are seamlessly swapped into the same tab the user was viewing. From the user’s perspective, the page simply loads much faster than before.
Web developers can trigger prerendering as described below. Beginning in Chrome 17, Chrome itself will initiate prerendering in some cases, based on the user's interactions with the address bar.
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:
Google Developer Tools "Network" Tab clears after redirect to another page and i want to know if there is any way to keep all request?
I want to do this because i want to verify one POST request but it redirects and get cleared.
In firebug we can use the "Persist" option:
(The "Persist" option prevents clearing the console at a page reload. That means, the messages will stay inside the console as long as this option is enabled.)
https://getfirebug.com/wiki/index.php/Console_Panel
In the network tab of dev tools, on the top left of the dev tools there should be a checkbox labelled Preserve log. Click that and it will preserve network upon navigation.
(older versions may have the record button in the buttom left, as seen here)
Press F8 a couple times until "Paused in debugger" displays. This pauses all JavaScript execution before the reload event. Press F8 again to resume.
The "preserve log" feature mentioned in an answer above is helpful, but each time the page changes (refresh, etc.), the contents of some of the network data tabs are blanked and "Failed to load response data" is displayed. Stopping Javascript execution at the right spot can let you peek at this data before it is erased.