On my website, an AJAX script makes a lot of requests. I would like to have the network log scroll down to the newest requests automatically without me needing to do this. How would I do this on Chrome DevTools?
There is a somewhat cumbersome solution:
Open devtools-on-devtools.
Open devtools first and switch its Dock side in the menu to a detached (floating) window
in the now detached devtools press Ctrl+Shift+i or ⌘+⌥+i on MacOS,
which will open devtools-on-devtools in a new window
Run this code in devtools-on-devtools console:
setInterval(() => {
let scr = document.querySelector("div.network-waterfall-v-scroll")
scr.scrollTop = scr.scrollHeight
}, 3000);
Related
I always use different windows of Chrome during development, and for each window I have to open a devtool window as well.
Every time I have to navigate between those windows, or I have to switch between IDE and devtool, I have to click on the right minimized devtool, and sometimes it's quite difficult because they have the same title.
I know, I could press F12 again on the window I need to maximize the right devtool, or I can maximize once the right one, and then switch between IDE and the devtool with Alt+Tab.
I could use also JavaScript to change the title, but it would last just until the next reload.
I think that give a specific name to the devtool window would speed up my work. In this way, I could identify immediately which devtool I need. For example I could rename a window "mobile" and the second one "desktop".
There is any way to do it?
There's no such feature so you can request it on https://crbug.com.
Meanwhile here's a workaround:
open devtools-on-devtools
run this console command in its window:
document.title = 'whatever'
save this command in devtools snippets to quickly re-run it later.
How to open devtools-on-devtools:
Open devtools first and switch its Dock side in the menu to a detached (floating) window
in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
which will open devtools-on-devtools in a new window
I have a web app with a chat that opens in a new popup window. Normally, in Chrome I can hit F12 and click the icon of a smart phone to toggle it. But in the popup window this icon does not appear. This is important for me since I need to throttle the connection of the popup in order to simulate a user disconnecting from the chat.
Thanks!
It doesn't seem to be currently possible. I've opened a ticket for you. Meanwhile you have couple of options:
open popup in a regular window (copy paste the url, or modify window.open call to open a new tab instead of a separate window),
create a Chrome extension that uses debugger API to send emulateNetworkConditions message to your popup window
or try hacking DevTools like so:
open DevTools (A) for your popup
focus on DevTools window and open another DevTools (B) for that window using a keyboard shortcut (F12/alt+cmd+J)
in the console of the DevTools B call WebInspector.overridesSupport.setEmulationEnabled(true) (to enable emulation) and then WebInspector.overridesSupport.settings.networkConditions.set({throughput: 1.5 * 1024, latency: 40}); (to enable network throttling)
Perhaps easier way as of today is to install chrome extension which will allow you to open preview in new tab instead of popup. There you can have the same icon to toggle to mobile. Below is the extension:
https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm?hl=en
I'm trying to do some simple debugging on a Chrome extension. When I try to catch an event ID and show it in an alert, Chrome immediately closes the alert and the default popup window making it impossible to tell what was in the alert. For instance:
$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
alert(e.target.id);
});
To instead log this to the console, I could do:
$("a[data-toggle='pill']").on('shown.bs.tab', function (e) {
console.log(e.target.id);
});
However, if I inadvertently close the popup or have to reload the extension, then the console window I opened using "inspect popup" on the popup will also be closed. This makes for a very tedious debug process.
What is a better approach to debugging and test Chrome extensions for the default_popup?
You can debug your chrome extensions like this
go to this link
chrome://inspect/#extensions
you can see your installed extensions and you can inspect them
:)
grab the link to the extension and change url to popup window url
in my ex: I changed background.html --> popup.html
I'm developing a chrome app. Whenever I restart the app to test new code (from context menu or chrome://extensions), the developer tools window closes and I have to re-open it manually (right click > inspect element). Previous behaviour was that the developer window would also automatically re-open during this process.
Right now I'm trying to actually debug code that runs on app load, and I can't get to any break points because by the time I can manually re-launch the developer tools they've been missed.
How can I have the developer window automatically re-open when the app is restarted?
No.
You can't programmatically open the Chrome DevTools.
What I suggest is to change onload to a function, and call that from the console.
When you click a target='_blank' link, it naturally opens a new tab in Google Chrome. For particular sites, I need to use the Chrome Developer Tools to examine the http requests for any new tabs that are opened.
Whenever you have Chrome Dev Tools open on your current page and then click a link that opens a new tab, Chrome Dev Tools are not opened on the new page by default. Opening Chrome Dev Tools at this point is too late because the tools do not capture the http requests for the page.
Also, in many cases, these new tabs go through a series of redirects before reaching the final page, so I cannot simply reload the page after opening Chrome Dev Tools.
The only workaround I can think of is, in the case that the site I'm working on is on a local development server, I can temporarily change the link from target='_blank' to target='_self', but this is unrealistic for a site with thousands of links or for a site that I have no control over the code.
Is it possible to set Chrome Dev Tools to automatically open with every new tab (opened either manually or via target='_blank'?
I'm not sure as of which Chrome version this changed, but if you click on the Settings wheel on dev tools:
You'll see a Global section with a checkmark for "Auto-Open DevTools for popups", which works for opening target="_blank" links with a devtools window:
It's possible to auto open devtools for all the new tabs instead of just target = _blank. When launching google chrome, pass the flag --auto-open-devtools-for-tabs. It enables launching of devtools for all the windows created automatically.
For linux
google-chrome --auto-open-devtools-for-tabs
For Mac
open -a "Google Chrome" --args --auto-open-devtools-for-tabs
You can only open DevTools window via UI action or keyboard shortcut. There is no way to do this automatically.