Chrome DevTools: Use the DevTools Terminal and Sources Panel to run your code linters when you make code changes

ModernDevTools.com is in pre-launch! Thank you everyone!

There is an experimental terminal built into DevTools. You can combine this feature with Filesystem 2.0 to make live changes to your code, and see the linting output in real-time for your HTML, CSS and JavaScript.

When you run the DevTools terminal, you can start Gulp/Grunt/Webpack etc. watchers to run linters as you change your code.

Warning: DevTools Terminal is very experimental. Things can change or break.

Here are the steps which work on Mac OS X, using Canary.

1. Grab the DevTools repo: $ git clone --depth 1 https://github.com/ChromeDevTools/devtools-frontend.git && cd devtools-frontend/services && npm i
2. Start the terminal script: $ node devtools.js
3. Start Canary: $ /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --devtools-flags='service-backend=ws://localhost:9022/endpoint'
4. Go to Settings > Experiments
5. Hit Shift 6 times
6. Enable the Terminal in Drawer experiment
7. Restart DevTools
8. Access the DevTools terminal via the drawer