info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-02-24 19:42:51 +01:00
Code Issues Releases Wiki Activity

Resources added for Chrome dev tools (#2215)

Browse Source
This commit is contained in:
Archit Sharma 2022-10-07 11:55:18 +00:00 committed by GitHub
parent 37e5ade26f
commit 0d072fb874
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
content/roadmaps/113-qa/content/104-qa-non-functional-testing/101-accessibility-testing/100-chrome-devtools.md
View File

@ -1 +1,10 @@
# Chrome devtools
# 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 temprary 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`/`cmd+opt+j` to enter it directly). Another very useful feature in the Chrome dev tools is the Lighthouse (for checking perfomance) — more on this later.
NOTE: This isn't a chrome-specific feature, and most browsers (Chromium based or otherwise) will have their own, largely-similar set of devtools.
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.chrome.com/docs/devtools/overview/'>Official Docs</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/mastering-chrome-developer-tools-next-level-front-end-development-techniques-3ac0b6fe8a3/'>Mastering Chrome Dev Tools</BadgeLink>