• Edit
  • Delete

Chrome Browser - Save Inspector Changes to local 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.