We may earn an affiliate commission when you visit our partners.

Debugging Sites Using Chrome DevTools

Google Chrome ships with a powerful set of tools to help developers debug web sites. This course will teach you how to use those tools to troubleshoot and fix problems in a site's HTML, CSS, and JavaScript.

Debugging client-side web applications can be difficult because they involve a complex mix of HTML, CSS, and JavaScript while also storing data on the client and constantly communicating with a web server. In this course, Debugging Sites Using Chrome DevTools, you'll learn how to use the powerful set of tools included with Chrome to quickly diagnose and fix problems in your client-side applications. First, you'll learn how to examine and edit both the structure and style of a site to make sure your designs are being implemented correctly. Next, you'll discover how to fully harness the power of the browser console to log output, execute JavaScript, and troubleshoot problems. Finally, you'll explore how to step through and debug JavaScript code right in the browser and save fixes back to your development environment. When you're finished with this course, you'll have the skills needed to confidently and efficiently debug modern client-side web applications.

Enroll now

Or start your subscription today

And complete this course over a free trial

Here's a deal for you

We found an offer that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Valid for a limited time only

Future-proof your career

Access O'Reilly books, live events, courses, and more. Save with an annual subscription.

Take

15%

off

What's inside

Syllabus

Course Overview

Understanding the Capabilities of Chrome DevTools

Examining and Editing Web Pages

Using the Console

Debugging JavaScript

Viewing Network Communication and Local Data

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops debugging skills for client-side web applications, which is an essential aspect of web development

Emphasizes the use of Chrome DevTools, which is industry-standard for debugging web applications

Suitable for experienced web developers seeking to enhance their debugging abilities

Taught by Brice Wilson, who is an expert in web development with extensive experience in debugging web applications

Covers a comprehensive range of debugging techniques, including examining web pages, using the console, debugging JavaScript, and viewing network communication

Save this course

Save Debugging Sites Using Chrome DevTools to your list so you can find it easily later:

Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Debugging Sites Using Chrome DevTools with these activities:

Review the Basics of HTML and CSS

Show steps

Touching on the core of HTML and CSS will help you strengthen the foundation needed to follow along with the more advanced concepts in this course.

Browse courses on HTML

Show steps

Review the structure of HTML documents, including tags, elements, and attributes.
Examine and practice the syntax and rules of CSS, including selectors, properties, and values.
Try out a few simple HTML and CSS coding exercises to solidify your understanding.

Inspect and Edit Web Pages

Show steps

You will frequently use the Chrome DevTools in this course, so practicing with them beforehand allows you to become more familiar and agile with the tools.

Browse courses on Web Development Tools

Show steps

Open the Chrome DevTools and explore the different panels, such as Elements, Styles, and Network.
Use the Elements panel to inspect the HTML structure of a web page and make changes to the DOM.
Use the Styles panel to inspect and edit the CSS styles applied to elements on the page.
Use the Network panel to monitor the network requests made by the page.
Experiment with different DevTools features to become comfortable using them.

Create a Cheat Sheet of Debugging Techniques

Show steps

Developing a cheat sheet of debugging techniques will help you quickly reference common error patterns and solutions as you work through this course.

Browse courses on Debugging

Show steps

Identify the most common debugging techniques used in JavaScript development.
Create a summary or cheat sheet of these techniques, including the steps involved and expected outcomes.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Follow a Tutorial on JavaScript Debugging

Show steps

Reinforce your understanding of debugging JavaScript code by following a step-by-step tutorial that covers common debugging techniques.

Browse courses on JavaScript

Show steps

Find a tutorial that covers debugging JavaScript code, such as 'JavaScript Debugging for Beginners' or 'How to Debug JavaScript Errors'.
Follow the steps outlined in the tutorial to learn how to use debugging tools and techniques.
Try out the debugging techniques on your own JavaScript code to practice and solidify your understanding.

Join a Study Group or Discussion Forum

Show steps

This will allow you to exchange knowledge with peers, ask questions, and gain different perspectives on the material.

Browse courses on Collaboration

Show steps

Find a study group or discussion forum related to web development or JavaScript debugging.
Participate in discussions, ask questions, and share your knowledge with others.

Participate in a Coding Challenge

Show steps

Participating in a coding challenge can help you test your skills, identify areas for improvement, and gain a sense of accomplishment.

Browse courses on JavaScript

Show steps

Find a coding challenge that focuses on JavaScript debugging or front-end development.
Participate in the challenge and try to solve the problems.
Review your solutions and identify areas where you can improve your debugging techniques.

Develop a Mini Debugging Project

Show steps

Applying your debugging skills to a small project cements your knowledge and helps you retain the techniques you've learned in this course.

Browse courses on JavaScript

Show steps

Choose a simple JavaScript application or project.
Introduce intentional bugs into the code and document each bug and its expected behavior.
Use debugging tools and techniques to identify and fix the bugs.

Career center

Learners who complete Debugging Sites Using Chrome DevTools will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers build and maintain websites. A basic knowledge of HTML, CSS, and JavaScript is required, as well as the ability to use developer tools. The Debugging Sites Using Chrome DevTools course would be a great way to learn how to use the Chrome DevTools, which will help you debug your code more efficiently. This course can also help you build a foundation in web development.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-End Developers are responsible for the design and implementation of the user interface of a website. The Debugging Sites Using Chrome DevTools course would be a great way to learn how to use the Chrome DevTools, which will help you debug your code more efficiently. This course can also help you build a foundation in front-end development.

See salaries and explore the career path for Front-End Developer

Software Engineer

Software Engineers design, develop, and maintain software systems. They must have a strong understanding of computer science fundamentals, as well as proficiency in at least one programming language. The Debugging Sites Using Chrome DevTools course would be a great way to learn how to use the Chrome DevTools, which will help you debug your code more efficiently. This course can also help you build a foundation in software engineering.

See salaries and explore the career path for Software Engineer

Quality Assurance Analyst

Quality Assurance Analysts test software to ensure that it meets the requirements and specifications. They must have a strong understanding of software testing techniques, as well as proficiency in at least one programming language. The Debugging Sites Using Chrome DevTools course would be a great way to learn how to use the Chrome DevTools, which will help you debug your code more efficiently. This course can also help you build a foundation in quality assurance.

See salaries and explore the career path for Quality Assurance Analyst

User Experience Designer

User Experience Designers design and evaluate the user experience of websites and applications. They must have a strong understanding of human-computer interaction, as well as proficiency in at least one design tool. The Debugging Sites Using Chrome DevTools course may be useful for User Experience Designers who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for User Experience Designer

Product Manager

Product Managers are responsible for the development and management of products. They must have a strong understanding of business and technology, as well as proficiency in at least one product management tool. The Debugging Sites Using Chrome DevTools course may be useful for Product Managers who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for Product Manager

Technical Writer

Technical Writers create and maintain documentation for software and other technical products. They must have a strong understanding of technical writing principles, as well as proficiency in at least one writing tool. The Debugging Sites Using Chrome DevTools course may be useful for Technical Writers who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for Technical Writer

Computer Science Teacher

Computer Science Teachers teach computer science concepts to students. They must have a strong understanding of computer science fundamentals, as well as proficiency in at least one programming language. The Debugging Sites Using Chrome DevTools course may be useful for Computer Science Teachers who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for Computer Science Teacher

Data Analyst

Data Analysts collect, analyze, and interpret data to help businesses make informed decisions. They must have a strong understanding of statistics and data analysis techniques, as well as proficiency in at least one programming language. The Debugging Sites Using Chrome DevTools course may be useful for Data Analysts who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for Data Analyst

Graphic designer

Graphic Designers create visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. They must have a strong understanding of design principles, as well as proficiency in at least one design tool. The Debugging Sites Using Chrome DevTools course may be useful for Graphic Designers who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for Graphic designer

Marketing Manager

Marketing Managers develop and execute marketing campaigns to promote products and services. They must have a strong understanding of marketing principles, as well as proficiency in at least one marketing tool. The Debugging Sites Using Chrome DevTools course may be useful for Marketing Managers who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for Marketing Manager

Sales Manager

Sales Managers develop and execute sales strategies to sell products and services. They must have a strong understanding of sales principles, as well as proficiency in at least one sales tool. The Debugging Sites Using Chrome DevTools course may be useful for Sales Managers who want to learn how to use the Chrome DevTools to debug their code.

See salaries and explore the career path for Sales Manager

Accountant

Accountants prepare and maintain financial records for businesses. They must have a strong understanding of accounting principles, as well as proficiency in at least one accounting tool. The Debugging Sites Using Chrome DevTools course is not relevant to Accountants.

See salaries and explore the career path for Accountant

Lawyer

Lawyers advise and represent clients in legal matters. They must have a strong understanding of the law, as well as proficiency in at least one legal research tool. The Debugging Sites Using Chrome DevTools course is not relevant to Lawyers.

See salaries and explore the career path for Lawyer

Doctor

Doctors diagnose and treat patients with illnesses and injuries. They must have a strong understanding of medicine, as well as proficiency in at least one medical tool. The Debugging Sites Using Chrome DevTools course is not relevant to Doctors.

See salaries and explore the career path for Doctor

Reading list

We've selected 21 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Debugging Sites Using Chrome DevTools.

JavaScript Enlightenment

Save

Offers a comprehensive overview of JavaScript, covering both core concepts and advanced topics, which can provide a solid foundation for debugging.

Debugging Sites Using Chrome DevTools

Here's a deal for you

What's inside

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses