Mugo Web main content.

Editing CSS/JS in Google Chrome

By: Ernesto Buenrostro | September 28, 2018 | Front-end development and 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.

Comments

blog comments powered by Disqus