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.
Auf dieser Seite können Sie das Online-Video Practice - Web Browser Developer Tools mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer S Tier Web Dev 01 April 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 57 Mal angesehen und es wurde von 3 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
