Chrome Browser Web Development Cheatsheet

Disable Javascript

• CTRL-SHIFT-P
• "javascript" -> disable Javascript

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"