Member preview

Using Chrome as a Local Web Server

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

Chrome grille and headlights of a vintage car. Photo by Dave Ashton on Unsplash

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:

Figure 1. My Chrome local override folder structure
  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 f">F</div>
</div>

3. Copy the above HTML code as index.html under C:\Dev\Web\chromelocal\chromeserver.com. The CSS code is as follows:

body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(5, [col] 100px);
grid-template-rows: repeat(3, [row] auto);
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
z-index: 10;
}
.a {
grid-column: col / span 2;
grid-row: row;
}
.b {
grid-column: col 3 / span 3;
grid-row: row;
}
.c {
grid-column: col;
grid-row: row 2;
}
.d {
grid-column: col 2 / span 3;
grid-row: row 2;
}
.e {
grid-column: col / span 5;
grid-row: row 3;
}
.f {
grid-column: col 3 / span 3;
grid-row: row 2;
background-color: rgba(49, 121, 207, 0.5);
z-index: 20;
}

Copy the above CSS code as index.css under C:\Dev\Web\chromelocal\chromeserver.com.

Modify the HTML code to add reference to the CSS file as below:

<link rel="stylesheet" href="index.css">
<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 f">F</div>
</div>

4. Load Chrome and open Developer Tools window by pressing F12

Click ‘Sources’ tab and then select ‘Overrides’ sub-tab on the left navigation panel.

Figure 2. Overrides tab

Click ‘+ Select folder for overrides’. In the folder selection dialog, select C:\Dev\Web\chromelocal as the root of all overrides.

When Chrome asks you to confirm access, click ‘Allow’ to let Chrome access the folder contents. You will see the folder and contents appear in the navigation panel.

Figure 3. Confirm access to override folder
Figure 4. Overrides folder listing when override is enabled

5. In the browser window, navigate to: http://chromeserver.com. Voila! Your web page appears in the browser.

You can create any number of local web servers this way. Just add more domains as folders under C:\Dev\Web\chromelocal. Then add web pages and resources under those folders. Enjoy!