Chrome Developer Tools Tutorial for Beginners

Описание: Learn about Chrome Developer Tools. We'll have a detail look at what different options exist for developer to troubleshoot their web applications.
Reactime 14.0: A Chrome Developer Tool for Debugging in React Apps
☞ https://morioh.com/p/025fcdb75dff
CironNode: Debug Node.js code with Chrome Developer Tools
☞ https://morioh.com/p/5ee65dc1a406
Chrome Inspector Tutorial - [Chrome Developer Tools]
☞ https://morioh.com/p/787ca89c8050

Learn about Chrome Developer Tools. We'll have a detail look at what different options exist for developer to troubleshoot their web applications. Along with troubleshooting they can make live changes and see the effect. We will cover the following in this course.

Getting comfortable with the tool

Elements

Source

Console

Network

Performance

Application

Security

Memory

Lighthouse

We will start with by first getting comfortable with the developer tools by understanding what exist where, look and feel etc.Once we are kind of comfortable we will start with our tab which Elements. In this tab we will try to see how we can interact with web page via modifying styles and html. Its more from page structure and beautifications we are troubleshooting which is HTML and CSS part.

Then we will move towards troubleshooting of Javascript part via sources tab. We will look at different types of breakpoints, source code modification option, overrides etc. It is perfectly logical to cover the console part as next step because source and console work hand in hand. Console is like a REPL in browser where you can try your own stuff.

Since now we have fair bit covered the HTML,CSS and Javascript troubleshooting it makes sense to understand how do we trouble shoot server side request and browser local storage. So we will have a look at Network and Application tab.Now from an application points of view pending is performance and security that is why we will move towards lighthouse, performance, memory and security tab’s to understand these aspect in details.

What you’ll learn

Chrome Developer Tools
Troubleshooting in Browser

Are there any course requirements or prerequisites?

Bit of understanding of what a Browser is
Some basic understanding of Javascript

Who this course is for:

Web Developers
Beginner Developers

#Chrome #Developer Morioh

Note: If you have any copyright issue with the content used in our channel or you find something that belongs to you, before you claim it to Youtube, SEND US A MESSAGE and the respective content will be DELETED right away. Thanks for understanding.

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
👕 Merchandise: https://www.moteefe.com/store/developer?cp...
🌎 Social Network for Developers: https://morioh.com/