Blog» Editing CSS/JS in Google Chrome

Editing CSS/JS in Google Chrome

By Ernesto Buenrostro  | September 28, 2018  |  Front-end development, Productivity tools

How many times have you found yourself editing and tuning up CSS or JavaScript code right in the browser, then refreshing the page only to lose all of your changes? Improving development workflows can help web developers to be more efficient and deliver a higher quality final product.

The web browser plays an important role in many web development workflows; editing HTML, JS, and CSS files is often a part of daily tasks. If the main browser you are using is Google Chrome, you can take advantage of “Workspaces”, which is a feature of Chrome's DevTools, to make your development workflow more efficient. Here's how.

To enable the feature on a site, follow the steps below:

  1. Open your Chrome DevTools.
  2. Click on the “Sources” panel.
  3. Then, click on the “Filesystem” panel.
  4. Finally, click on “Add folder to workspace.”
  5. Chrome will open a window to let you choose the directory with the source files. It is important that the directory you choose matches the path of the files on your web page (for example: if your page is loading the following CSS file <link href="/extension/design/front-end/stylesheets/styles.css" rel="stylesheet">, you need to link the extension directory; not only the stylesheets directory.)
Image showing the Google Chrome Dev Tools with the sources and filesystem tabs selected

After linking the directory with the source code, Google Chrome will ask for permission to link the directory to the current page. Click "Allow". 

Image showing Google Chrome asking for permission to attach the selected directory

When you have granted the web page access to the directory, it will be listed in the “Filesystem” panel. The files used by your web page will also be bound to the files on your file system.

Image showing the Google Chrome Dev Tools with the directory attached to the webpage

Selecting an HTML element in the Google Chrome DevTools “Elements” tab will show the CSS that has been applied to it. Also, you will see a green dot next to the file name, which means that the file has been bound to the file in your file system.

Image showing the webpage CSS files bounded to the files in the filesystem

 

Clicking on the “style.css” link will take you to the line of CSS code in the “Sources” panel.

Making changes to the file in the Sources panel and pressing cmd + s on a Mac or ctrl + s in Windows will save the changes to your file system and will apply the changes to the web page.

Image showing browser editing capabilities and saving changes to the file in the local filesystem

This is a good improvement to the development workflow because you don’t need to refresh and wait until the page is rendered again; you can see and save the changes immediately.


Join our mailing list for news, events, tips, and tools

Related Blog Posts

A simple Sass integration for eZ Publish

Working with CSS preprocessors like Sass or Less is much more fun than working with pure CSS. Here's a simple shell script to integrate Sass into your...

Read more »

JavaScript and CSS in eZ Publish 5

A key component of a content management system or web application is the handling of JavaScript and CSS files, specifically around loading, combining,...

Read more »

7 benefits of using SASS over conventional CSS

Writing CSS (Cascading Style Sheets) is critical to effectively describe how HTML elements must be displayed on a web page to define styles, design,...

Read more »

Comments

blog comments powered by Disqus

Hi, we're Mugo Web - Nice to meet you!

We're a group of web experts who solve complex web problems.

Learn more about us »

Search


Categories


Yes - we can do that.

Many years of experience with complex websites allows us to offer total solutions.

Learn more about what we can do »

We love our clients (and they love us too)

We've solved problems across North America and around the world.

Learn more about what we've done »

We tweet too

Follow us on Twitter for the latest Mugo happenings

mugo twitter page @mugo

© 2008 - 2018 Mugo Web. All rights reserved.