Chrome Browser Web Development Cheatsheet

Save CSS Changes to actual CSS File (Link Inspector and IDE)

https://developers.google.com/web/tools/chrome-devtools/workspaces/?utm_source=devtools

Prerequisites: local webserver / local developer instance

Setup

  • Open Dev-Tools (F12)
  • Tab "Sources"
  • Sub-Tab "Filesystem" (enlarge area when not visible)
  • "+" Add folder to workspace
  • Select folder on local PC
  • Permit Access (Message below URL bar)

Workflow

  • A green dot next to the file indicates linkage of browser to filesystem of a file
  • Inspect elements
  • Edit in the "Styles" tab
  • Changes are automatically saved in the source file.

Network Tab: Show full URL path

  • Right click on column header "Name" -> Select "Path"
  • Right click on column header "Name" -> Deselect "Name"