Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Automatically open Chrome Dev Tools with target='_blank' link?

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'?

like image 730
Jake Wilson Avatar asked Sep 17 '12 14:09

Jake Wilson


People also ask

How do I turn on Developer Tools in Chrome automatically?

Tip: You can automatically open Chrome DevTools in each new tab! Just pass the --auto-open-devtools-for-tabs flag to Chrome. You can see a preview of this in action below. That's it!

How do I get Chrome to open inspect element in same window?

Right-clicking a specific page element will open that element in the inspector view. Select Tools > Web Developer > Inspector from the top menu bar. Use the shortcut control-shift-C in Windows or command-option-C in macOS.

What are 3 ways to open Developer Tools in Google Chrome?

To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

How do I trace a link that opens a new tab?

HttpWatch on Windows can record the network traffic generated when a new Chrome tab or window is opened by enabling auto-recording in Tools->Options->Recording. In the new window click on the HttpWatch icon to view the network trace.


1 Answers

I'm not sure as of which Chrome version this changed, but if you click on the Settings wheel on dev tools:

enter image description here

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:

enter image description here

like image 127
Gabriel Magana Avatar answered Nov 09 '22 06:11

Gabriel Magana