From the course: Learning Chrome Web Developer Tools
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Open files in DevTools - Chrome Tutorial
From the course: Learning Chrome Web Developer Tools
Open files in DevTools
- [Instructor] I'm looking on the Binaryville website, and I'd like to be able to refer back to my code, while I'm working in the browser. Now, I could use the Elements panel to see the CSS style rules, and some JS that's applied to each element I select. But sometimes, I want to see the full, original files instead. Instead of switching back and forth between my editor and the Dev Tools to do that, I can use the Sources panel to open and view each of the files that are part of the currently opened page. With the Dev Tools open, I can click Sources, to view that panel. The default panel displays a few commands that could be useful here, starting with Command + P for Mac, which is Control + P for windows, to select and open a file. And when I press Command + P, I get an input box with a list below it of all the files used on-page. Now, I can type in the box to narrow the search and display only files I'm looking for.…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.