Chrome DevTools TipsChrome DevTools Tips

  1. Quickly search all source code by pressing Command + Option + F and entering your search into the search bar.
  2. Easily access any file within the current project via Command + P and search for the name.
  3. Edit HTML and preview the changes by selecting any element, double click the opening tag (the closing tag will be automatically updated for you). Any changes will be displayed in the browser as if the source code has been edited.
  4. Edit and preview CSS code by selecting the element you want to edit. Under the style panel, you can change any element you want and preview the results in the browser.
  5. Use multiple cursors to edit more than one line at the same time via Command + Click.
  6. Enter device mode by selecting the small phone or tablet icon in the left-hand upper corner, or via Command + Shift + M. This allows you to see how the page will render on another device.
  7. Command + Option + J opens the Console, which allows you to see logged messages or run JavaScript.
  8. Command K will clear the console
  9. From the Elements panel, you can drag and drop any HTML element and change its position across the page.
  10. Use breakpoints to debug Javascript by clicking the line number you want to break at, then hitting Command + R to refresh the page, the page will then run into the breakpoint.

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store