Using Chrome as a Local Web Server

Chrome version 65+ can double as a local static web server

Justin Mathews

·

Follow

4 min read

·

Apr 24, 2018

18

Share

Many web developers like me utilize Chrome Developer Tools as a versatile tool for web development. It comes in quite handy for making live CSS or HTML changes or analyzing web pages. Chrome release 65 gave us a long awaited and nifty tool for overriding resources used by web pages and replacing them with our own local resources. For example you can override a CSS file used by a web page and make local changes to the CSS file. Any change you make to CSS properties is reflected live in the web browser.

A little known fact is that this local override feature can be used to create a web server to serve static web pages. And you can name the domain of your web server whatever you like. Even if the domain name already exists, Chrome will serve pages from your own server if the requested page or resource exists on your local server.

Let us go step by step on how to create a static web page server using Chrome Developer Tools override feature. I am going to use chromeserver.comas my domain name:

1. Create a local folder to be the root of all your local overrides. I created a folder C:\Dev\Web\chromelocal as my override root. Now create your web server document root folder under the override root folder to serve web pages and resources from and name it the domain name you choose. Since my domain name is chromeserver.com, I created a folder named chromeserver.com under C:\Dev\Web\chromelocal. So the path to my web server document root is: C:\Dev\Web\chromelocal\chromeserver.com
2. Now create your web page(s) and other resources required by the web page(s) under the document root. For simplicity I am going to use one of the CSS grid examples by Rachel Andrew from https://gridbyexample.com/examples/. I am shamelessly copying the HTML and CSS code from the ‘Layering items’ sample. The HTML code is as below:

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box…