Practice - Web Browser Developer Tools
This video is part of a playlist covering how to get a web development job and basic coding skills. The full playlist can be found here: • How To Get A Web Development Job
-------------------------------------------------------------------
Lesson Description:
We learn how the developer tools built into the Google Chrome web browser can be used for web development.
Terminology:
Web Browser Developer Tools - A series of tools built into modern web browsers (Chrome, Firefox, Safari, etc) to help identify and fix problems with webpages.
Elements Tab (Chrome Dev Tools) - View and edit the HTML elements of a webpage and their associated CSS styles.
Console Tab (Chrome Dev Tools) - Evaluate JavaScript in real-time by typing it in the console. Additionally, any messages from the webpage code will print out in the console, including errors, warnings, developer-generated messages that you've intentionally placed in your code, and more.
Sources Tab (Chrome Dev Tools) - Lists all of the sources for the webpage which includes things like the HTML file of the page, CSS Style Sheets, images, audio files, video files, JavaScript files and more. Additionally, there are tools built into the sources tab which help you debug (find and fix) any JavaScript errors that you've made.
Network Tab (Chrome Dev Tools) - Lists all of the network requests and responses made by the webpage.
Performance Tab (Chrome Dev Tools) - Various tools for helping you find and fix performance problems in your webpage. For example, an animation might be doing too many mathematical calculations and so it's slowing down your webpage. The performance tab will help you find and fix this issue.
Memory Tab (Chrome Dev Tools) - Various tools for helping you find and fix memory problems in your webpage. If you accidentally write bad code, it can grow in size unintentionally and use up more and more of your computer's resources until it crashes your browser or computer. This tab helps you identify those problems.
Application Tab (Chrome Dev Tools) - Lists all of the data stored by the webpage in your browser. For example, you can see cookies in this tab, which allow web servers to identify and track you as you browse their webpages, plus any other data they might want to store temporarily.
Security Tab (Chrome Dev Tools) - Lists any security problems with your website.
Lighthouse Tab (Chrome Dev Tools) - Generates a performance and accessibility report for your webpage. The report gives suggestions for possible improvements in order to make your site faster for users, rank higher in search engines, and maximize accessibility/usability of your site for visually impaired users.
Recorder Tab (Chrome Dev Tools) - Experimental - the Google Chrome development team is currently working on it. Not covered in the course.
Performance Insights Tab (Chrome Dev Tools) - Experimental - the Google Chrome development team is currently working on it. Not covered in the course.
Resources:
https://developer.mozilla.org/en-US/d...
Meme Resources:
• One Million Dollars - Austin Powers: ... (Dr. Evil - One Million Dollars)
https://knowyourmeme.com/memes/swole-...
https://knowyourmeme.com/memes/swole-...
-------------------------------------------------------------------
THE GET A WEB DEV JOB COURSE:
You're in learn2code hell. We're gonna get you out.
You will go from ZERO to a $120,000+ skill set.
We'll learn web development together - from HTML and CSS (baby's first code) through React, GraphQL, Docker, and Kubernetes (big boy stuff worth $120,000+).
We'll also cover HOW TO ACTUALLY GET HIRED (resumes, interviews, projects, practice problems, and more) - the most important step that other web dev courses skip.
Sur cette page du site, vous pouvez voir la vidéo en ligne Practice - Web Browser Developer Tools durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur S Tier Web Dev 01 avril 2023, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 57 fois et il a aimé 3 téléspectateurs. Bon visionnage!
