Sometimes when debugging in web development it helps to have the Google Chrome’s DevTools open as soon as a new window or tab is opened. This can be to view Network panel or Console log. Google Chrome’s Devtools has a setting that can always open the DevTools for popup windows.
To turn on this setting use the following instructions:
1. From Google Chrome, open DevTools.To do this on Windows press F12 or CTRL + SHIFT + i.
To do this on MacOS press Command + Option + i
2. Open DevTools settings by clicking F1 or the gear icon in the upper right corner next the three vertical dots.
3. With DevTools Settings open, scroll down to the Global section and check the following option: Auto-open DevTools for popups
Now, when new windows or tabs open the DevTools will be open.
The setting can be test using the below html file has links that open a pop up window and a new tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pop up windows</title>
</head>
<body>
<a href="#" onClick="MyWindow=window.open('https://example.org','MyWindow','width=600,height=300'); return false;">Click Here</a>
<br><br>
<a href="https://example.org" target="_blank">example.org</a>
</body>
</html>
References:
https://developer.chrome.com/docs/devtools/open/
https://stackoverflow.com/questions/12212504/automatically-open-chrome-developer-tools-when-new-tab-new-window-is-opened