Scribd
Upload
63 views7 pages

1.5 Developer Tools

Developer tools allow web developers to inspect elements on an HTML page, view stylesheets, analyze performance, and debug applications built with frameworks like React and Angular. They can be accessed in Chrome, Firefox, and Safari by pressing F12 or right clicking and selecting "Inspect Element." Chrome extensions like React Developer Tools and Augury provide additional debugging capabilities for React and Angular apps. Redux DevTools also help debug Redux applications.

Uploaded by

jesus llumpo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views7 pages

1.5 Developer Tools

Developer tools allow web developers to inspect elements on an HTML page, view stylesheets, analyze performance, and debug applications built with frameworks like React and Angular. They can be accessed in Chrome, Firefox, and Safari by pressing F12 or right clicking and selecting "Inspect Element." Chrome extensions like React Developer Tools and Augury provide additional debugging capabilities for React and Angular apps. Redux DevTools also help debug Redux applications.

Uploaded by

jesus llumpo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Dev Tools

Enrique Barra
Developer Tools
 It is a set of web developer tools built directly into the
browser. You can see the different elements that compose the
HTML page, the styles, different source files, analyze
performance, network, …

 How to access them:


– Chrome and Firefox: You can access them with F12 or right click
anywhere on the webpage and go to “Inspect Element”
– Safari: you first need to turn on the Develop menu. Open Safari >
Preferences, and click on the Advanced Tab. Then check the box next
to "Show Develop in menu bar." Once you exit Preferences, you'll see a
new Develop menu appear

2
Developer Tools

3
Chrome extension - React Developer Tools
 Allows us to see components, properties, state, …
 It is installed from: https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi
 More info: https://github.com/facebook/react-devtools

4
Chrome extension - Augury
 Chrome Developer Tool extension for debugging and profiling
Angular applications.
 Documentation and installation guide at: https://augury.angular.io/

5
Extra: Redux DevTools

https://github.com/gaearon/redux-devtools

6
Dev Tools
Enrique Barra

You might also like