Editing your HTML and CSS in the browser

Chrome and Safari both allow you to edit and experiment with your HTML and CSS right in the browser. The tools and features available in both these browsers have expanded considerably in the past couple of years, giving developers many more options for experimenting with and debugging HTML, CSS and JavaScript.

In these videos, I show you how to use the developer tools in Chrome and Safari to edit your HTML and CSS, and to get easier access to elements using the JavaScript console. The videos are similar, although the two consoles are a bit different, so if you test your pages in multiple browsers, it’s worth watching both.

Editing your HTML and CSS in Chrome

Editing your HTML and CSS in Safari

Related Videos

Using the Console: Get a quick overview of the features in the Chrome and Safari developer consoles.

5 Comments

Dave Bilson on August 19, 2016 at 2:29 pm

Just watched the video “Editing your HTML and CSS in Chrome”

I can see that you can dynamically change the HTML and CSS using the Chrome Browser Dev tools.

If I made changes to the design that I wanted to keep, is it possible to sve these changes to a HTML and CSS files.

In effect having my original HTML and CSS and then an alternative design that I have saved?

Elisabeth Robson on August 19, 2016 at 5:17 pm

Hi Dave, Great question. I have not found a way to do this from Chrome without using an extension. If you have a separate JavaScript file and you make edits in that (via the Sources tab), you can copy and paste your code into a new JS file. Similarly for CSS if you have it in a separate file. But you cannot edit HTML using Sources (yet) so it’s not easy to copy and paste changes in your HTML to a new file.

There is an extension that will allow you to automatically save changes to CSS and JavaScript to source files:

https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl?hl=en
https://github.com/NV/chrome-devtools-autosave

but it requires that you run a local Node.js server.

Dave Bilson on August 30, 2016 at 10:52 pm

@Elisabeth Robson

Just found out about Developer Tools workspaces:

https://developers.google.com/web/tools/setup/setup-workflow?hl=en

Dave Bilson on August 30, 2016 at 11:06 pm

Here’s a recent YouTube video showing how you can set workspaces up and map your remote website to your local web server (mamp etc).

https://www.youtube.com/watch?v=DJfdjdlSJho

Elisabeth Robson on August 31, 2016 at 1:25 am

This is great – thank you for finding this!