Chrome Devtools: Elements - Make Changes in Your Browser

Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 5 years ago

Learn how to use the Elements panel in chrome devtools to make structural changes to the DOM as it runs - you can explore what your site would look like with different elements and attribute values, all without polluting your source code.

[00:00] If you right click on anything in your browser and go down to inspect, it's going to open the Chrome dev tools, it' going to have that element selected within the elements tab. As we've seen, this can be great for exploring and reading all of the different stuff on the website, and looking and seeing how it's represented, but this is not a read-only tool. This is giving you an up to date, immediate, real-time snapshot of the state of your DOM, and it's going to allow you to edit it as well. That takes various forms.

[00:31] We can, for instance, we can take any given element like here's this H2 that we have, and you can see that we have some rules for H1 on hover it will have a different color, and H2 doesn't have that rule. But maybe as we're developing our website we're thinking wouldn't it be neat if we rendered this as an H1 as well, instead of as an H2? Just double click on that H2, type H1, and hey look, you've just changed it. Now you'll notice that this change is persisted in memory in the state of the DOM as you're looking at it.

[01:06] If you refresh the page, this has not gone into your source code, right? The same is true for all of these changes that we're making here. Let's take a look at this image here again, and in addition to changing the tag itself, you can click through and you can change any of the attributes on this tag. Maybe instead of a 640x480 kitten we want a 320x240 kitten. That will just immediately update there for us. Again, that's not going to change, it's not going to persist that change.

[01:44] If you want to do something a little bit more comprehensive you can right-click any of these elements in the elements panel and you can select edit as HTML. That's going to open this nice little text editor for you. You can make a bunch of changes, we can do this, we can go back to 320, let's try 320x480, let's see what that looks like. Let's also add an H1 down here.

[02:13] We make all the changes we want to make, we'll click out of this, and look. All of that stuff gets put in here, and our kitten service was even able to accommodate our new vertical, portrait mode representation.

~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today