Google-chrome – How to reposition Chrome Developer Tools

google-chromegoogle-chrome-devtools

The tools are opened on the bottom of the chrome window per default. This is a rather bad choice for a wide screen display since there is plenty of empty space to the right but not much vertical space to spare. Unfortunately, I have found no way to reposition the tools. I would like to have them on the side, similar to firebug.

The only option similar to what I want is to detach the dev tools and place chrome and the tools window side-by-side. This is not very convenient for quickly alt-tabbing from the IDE to the browser and back though, so an "integrated" solution would be nice.

Best Answer

Chrome 46 or newer

Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option.

Chrome 45 or older

Long-hold the dock icon in the top right. It pops up an option to change the docking

To change the split between the HTML and CSS panels, go in DevTools to Settings (F1) > General > Appearance > Panel Layout.

Related Solutions

Javascript – Disable same origin policy in Chrome

Close chrome (or chromium) and restart with the --disable-web-security argument. I just tested this and verified that I can access the contents of an iframe with src="http://google.com" embedded in a page served from "localhost" (tested under chromium 5 / ubuntu). For me the exact command was:

Note : Kill all chrome instances before running command

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

The browser will warn you that "you are using an unsupported command line" when it first opens, which you can ignore.

From the chromium source:

// Don't enforce the same-origin policy. (Used by people testing their sites.)
const wchar_t kDisableWebSecurity[] = L"disable-web-security";

Before Chrome 48, you could just use:

chromium-browser --disable-web-security

Google-chrome – How to search all loaded scripts in Chrome Developer Tools

Open a new Search pane in Developer Tools by:

pressing Ctrl+Shift+F (Cmd+Option+I on mac)
clicking the overflow menu (⋮) in DevTools,
clicking the overflow menu in the Console (⋮) and choosing the Search option

You can search across all your scripts with support for regular expressions and case sensitivity.

Click any match to load that file/section in the scripts panel.

Search all files - results

Make sure 'Search in anonymous and content scripts' is checked in the DevTools Preferences (F1). This will return results from within iframes and HTML inline scripts: