How to detach Chrome developer tools window

on

Chrome developer tools is very useful in debugging Javascript and CSS in Chrome browser. Sometimes it is useful to detach the developer tools window. Here are quick steps:

  1. First open Developer tools in Chrome by clicking on Menu icon > More tools > Developer Tools. You can also use the following shortcuts to open chrome dev tools.
    OS Shortcut
    Mac [Option] + [Command] + I
    Windows [Ctrl] + [Shift] + I
  2. Click Menu icon (three dots) on top right of the chrome developer tools window. Then click on “Undock into separate window” as shown below:
    chrome-detach-developer-tools-window

  3. Click on “Dock to bottom” icon to bring it back to bottom.

Suggested posts:

  1. View http headers in Chrome
  2. Edit and debug css in Chrome
  3. How to clear Chrome HTTP 301 redirect cache
  4. how to debug javascript in Chrome
  5. view event handlers in Chrome
  6. How to debug :hover in Chrome
  7. Chrome – view javascript errors
  8. How to install and run Chrome PageSpeed insights for measuring site performance
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in | Tagged , , ,