Arya SinghandKamran Ahmed
a992fea69e
* Adds shortcut for opening dev tools `F12` open up Console tab in `Chrome`, `Mozilla`, `Brave` by default. However in `Microsoft Edge` it open up `Elements` panel. * Update content/roadmaps/106-javascript/content/117-javascript-chrome-dev-tools/readme.md Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
1.3 KiB
Javascript chrome dev tools
These are a set of tools built into the browser to aid frontend developers diagnose and solve various issues in their applications — such as JavaScript and logical bugs, CSS styling issues or even just making quick temporary alterations to the DOM.
To enter the dev tools, right click and click Inspect (or press ctrl+shift+c/cmd+opt+c) to enter the Elements panel. Here you can debug CSS and HTML issues. If you want to see logged messages or interact with javascript, enter the Console tab from the tabs above (or press ctrl+shift+j or F12 /cmd+opt+j to enter it directly). Another very useful feature in the Chrome dev tools is the Lighthouse (for checking performance).
NOTE: This isn't a chrome-specific feature, and most browsers (Chromium based or otherwise) will have their own, largely-similar set of devtools.
Free Content Official Docs Mastering Chrome Dev Tools