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. How to use fitvids.js for automatically resizing videos
  2. view event handlers in Chrome
  3. How to do recursive grep with specific file pattern
  4. jQuery jsonp and cross domain ajax
  5. PHP – assign multi lines string to a variable
  6. Bash – how to find last command exit status code
  7. Chrome – how to access pre-release features
  8. Apache – list loaded modules on Ubuntu
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in | Tagged , , ,