HTML vs DOM? Let’s debug them

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=J-02VNxE7lE


Duration: 5:11
8,370 views
366

What is HTML? What is the DOM tree? Let's demystify them and learn how to debug them with DevTools.

Chapters:
0:00 Intro
0:15 What is HTML
0:25 What is DOM
0:43 HTML vs DOM
1:11 Manipulate the DOM with JavaScript
1:33 Inspect the DOM
2:09 Locate DOM node quicker
2:27 Use $0 to console log a DOM node
3:03 Edit the DOM
4:09 Drag and drop the DOm node
4:15 Take a node screenshot
4:22 Persist changes with workspace

Resources:
https://goo.gle/devtools-dom
https://goo.gle/devtools-workspace
https://goo.gle/devtools-console-utils
https://goo.gle/devtools-open

Questions? Tweet to us:
Jecelyn Yeen → https://goo.gle/jecfish
Chrome DevTools → https://goo.gle/chromedevtools

Catch more DevTools Tips → https://goo.gle/DevToolsTips
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

#DevToolsTips



Other Videos By Chrome for Developers


2023-11-15Thinking on ways to solve PICKLISTS
2023-11-15Why isn't my element stuck where I wanted it to stick?
2023-11-14Protected Audience API ad size macros
2023-11-09What are chrome: URLs?
2023-11-06Values, invalid custom, and more!
2023-11-02ChromeOS Flex: Modernize legacy devices with Chrome
2023-11-01Lightening and darkening color - GUI Snippets
2023-10-31New in Chrome 119: cookies expiration limit updated, CSS updates, & fenced frames improvements!
2023-10-26Why isn't my custom property the value I expect?
2023-10-26Scripting and prefers-reduced-transparency
2023-10-26HTML vs DOM? Let’s debug them
2023-10-25Chrome Extensions: Learning the basics, AI and more with Matt Frisbie
2023-10-19How to keep source maps private
2023-10-18Thinking on ways to solve HALLOWEEN PROJECTIONS
2023-10-17@scope - New in Chrome 118
2023-10-17Adobe Express: On-the-go creativity powered by the web
2023-10-11Adding alpha to color - GUI Snippets
2023-10-11fluffy-center - CSS Podcast Tips
2023-10-11Debug Chrome extensions
2023-10-10How do I center a div?
2023-10-10New in Chrome 118: the @scope CSS rule is here, scripting and prefers-reduced-transparency, & more!


Tags:
Chrome
Developers
Google
Web
Chrome Devtools
chrome developer tools
intro to devtools tips
what are devtools tips
how to use devtools tips
devtools tips tutorial
devtools
chrome
developer
developers
google developer
google developers
google chrome developers
chrome developer
chrome developers
google chrome
Jecelyn Yeen