Chrome developer tools workspace mappings

by

It works only in canary at the moment.

EDIT: Now in Chrome (since ver 30+)

1) you need to open devtools settings panel. It has ‘Workspace’ section.

Screenshot of settings page

2) in this section you need to click on ‘Add folder’ item. It will show folder selection dialog.

3) After selecting a folder you will see an info bar about access rights for the folder.

Screenshot of access rights infobar

4) As a result you will see two top level elements in the Source panel file selector pane. In my case it were localhost:9080 site and devtools local file system folder. At this moment you need to create a mapping between site files and your local files. You can do that via context menu on a file.

Mapping screenshot

It doesn’t matter what file to map, local or site file.

5) at that moment devtools will ask you about restart.
restart screenshot

After restart devtools will show you the singe folder entry in the files pane and will apply all the changes you do to the local file each time when you press Ctrl + S or Cmd + S on mac.

More Related Contents:

  1. Disabling Chrome cache for website development
  2. “CAUTION: provisional headers are shown” in Chrome debugger
  3. Is there a way to get the XPath in Google Chrome?
  4. Using Chrome’s Element Inspector in Print Preview Mode?
  5. How do you inspect the web inspector in Chrome?
  6. What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?
  7. What’s the difference between “Normal Reload”, “Hard Reload”, and “Empty Cache and Hard Reload” in Chrome?
  8. How to change chrome packaged app id Or Why do we need key field in the manifest.json?
  9. Chrome stalls when making multiple requests to same resource?
  10. Automatically open Chrome developer tools when new tab/new window is opened
  11. Chrome DevTools Devices does not detect device when plugged in
  12. How to reposition Chrome Developer Tools
  13. Bizarre Error in Chrome Developer Console – Failed to load resource: net::ERR_CACHE_MISS
  14. Making HTTP Requests using Chrome Developer tools
  15. Chrome: Source of Post Data?
  16. How to search all loaded scripts in Chrome Developer Tools?
  17. “Inspect” a hover element?
  18. Remote Debugging for Chrome iOS (and Safari)
  19. Chrome not showing OPTIONS requests in Network tab
  20. Multiple URLs copy in Sources/Network tab
  21. Understanding Chrome network log “Stalled” state
  22. Chrome 84 Inspect element, find results not highlighted in yellow like before
  23. Chrome Dev Tools: How to trace network for a link that opens a new tab?
  24. How to block a URL in Chrome’s developer tools network monitor
  25. Chrome Console SameSite Cookie Attribute Warning
  26. Chrome remote debugging doesn’t work with IP
  27. Duplicate headers received from server
  28. How to keep a flex item from overflowing due to its text? [duplicate]
  29. Programmatically accessing function scope using Chrome DevTools console
  30. How to checkout and BUILD specific chromium tag/branch without download the FULL source code of all history?

Leave a Comment