InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

Chrome developer tools

  • Chrome - copy as cURL
  • Chrome - how to access pre-release features
  • Chrome - useful internal urls (chrome://)
  • Chrome - view javascript errors
  • Edit and debug css in Chrome
  • How to detach Chrome developer tools window
  • View http headers in Chrome
  • clear Chrome HTTP 301 redirect cache
  • custom http request headers
  • how to debug :hover
  • how to debug javascript in Chrome
  • view event handlers in Chrome
 
  • Home
  • > Tutorials
  • > Web Development
  • > Chrome developer tools

How to detach Chrome developer tools window

on Mar 31, 2016

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 Tutorials | Tagged Chrome developer tools, Tutorials, Web Development, Windows

Follow InfoHeap

facebook
twitter
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2021 InfoHeap.

Powered by WordPress