Source maps & Chrome Dev Tools
Turning Chrome into an IDE
Source what?
- Allow mapping to original code
- Useful within compressed code
- Helpful with preprocessors (SASS)
- Helpful with module js (Browserify/requires)
- Allows tracing to selectors, properties, etc.
Workspace?
- Allows mapping to local file system
- Persists to disk without browser refreshing
- No more U without the C!
- CRUD your code in the browser!
Getting Started
- Enable Dev Tools Experiments
Source maps Setup
- Open Dev Inspector > Settings
- Enable JavaScript source maps
- Enable CSS source maps
- Enable Auto-reload generated CSS
Workspace Setup
- Open Dev Inspector
- Click Settings > Workspace
- Add folder to workspace
- Allow Chrome access to directory
- Inspect Element
- Cmd + click property/value/selector
- Right click on file in sources
- Map to file system resource
- Select local file
Source maps work, I promise!
Thank you!
The End.
Sourcemaps & Chrome Dev Tools
By Brett Hayes
Sourcemaps & Chrome Dev Tools
Are you tired of searching through line numbers manually while debugging in Chrome Dev Tools? Sourcemaps has you covered! In this session, I'll show you how to set up your workspace in Chrome Dev Tools and get up and running with sourcemaps.
