Chrome Developer Tools - Save Files Locally and Building a REPL

5 years ago

Summary

Using Chrome Developer Tools takes up a significant portion of my development workflow. Fortunately, setting it up to save directly to your local source, or just to use as a simple REPL, is a trivial task with huge benefits.

Chrome Developer Tools has two key features that allow you to setup persistence

  • Add Folder to Workspace - Used to add a local directory to your Chrome Developer Sources pane
  • Map to File System Resource... - Maps files served to your local directory

Thoughts on REPLs (Read, Evaluate, Print, and Loop)

There are a ton of great REPLs out there including CodePen, JSFiddle, Plunker, and my current favorite Babel. Excluding Babel, they all have great saving and sharing capabilities. However, they all can be slow and lack when it comes to writing or debugging code. As an alternative, create your own REPL that can be saved in your own repo and share as needed.


Instructions

1. Create and Serve Project

Note: Skip part 1 if you are using create-react-app, angular-cli, or Yeoman.

  • Open a terminal
  • Create a open a project directory (mine is called "temp").
mkdir temp
cd temp
  • Initiate npm (follow the prompts) and install lite-server (A lightweight node-based dev server that uses Browsersync, which refreshes the browser when you change your code.)
npm init && npm install lite-server --save-dev
  • Create an index.js and index.html
touch index.js && touch index.html
  • Open an IDE like Visual Studio Code. The following opens it up in the current directory using the existing window. (Hint below if this doesn't work.)
code . -r
  • Update index.html to reference index.js with the following code:
  • I have also added a root div element, a button for testing, and a code tag for displaying data
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Chrome REPL</title>
  <script type="text/javascript" src="/index.js"></script>
</head>
<body>
  <div id="root">Loading...</div>
  <pre><code id="code"></code></pre>
</body>
</html>

Emmet: If you're using Emmet, just type ! and hit tab to generate a standard HTML5 document.

  • Update index.js
  • I have added a test function for writing to our root div tag and code tag.
const data = [
  {
    id: 1,
    name: 'John'
  },
  {
    id: 2,
    name: 'Jane'
  }
]

function loadData() {
  const filteredData = data.filter(d => d.id === 1) // let's filter some data
  document.getElementById('code').innerText = JSON.stringify(filteredData, null, 2)
}

window.onload = function() {
  document.getElementById('root').innerText = 'Window Loaded'
  loadData()
}
  • Start the server
lite-server

*Visual Studio Code Hint: Enable code in the terminal by opening Visual Studio Code Command+Shift+P, and selecting Shell Command: Install 'code command in PATH

2. Add Folder to Workspace and Map to File System Resource

  • Open up Chrome Developer Tools with Command+Option+I.
  • From the left Pane, click on the Sources tab.
  • Right-Click and click add folder to workspace.
  • Select the directory with your source code.
  • Click on Allow from the pop up.
  • Type Command+P to open index.js or any other referenced file.
  • Right-Click and click Map to Network Resource...
  • Select the correct file.
  • Now you can edit the file and save at will. You still have all the great debugging features of Chrome as well.

Bonus: Make it Dark

If you like working in the dark, just do the following:

  • Add a link to Bootstrap CDN
  • Add bg-dark and text-white classes to the body tag. (I like to add p-3 for a bit of padding as well.)
  • Add text-white class to the pre tag
<!doctype html>
<html lang="en">
<head>
  <title>Chrome REPL</title>
  <script type="text/javascript" src="/index.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="bg-dark text-white">
  <div id="root">Loading...</div>
  <pre class="text-white"><code id="code"></code></pre>
</body>
</html>

Source Code

If you'd rather just clone something, I have created a minimalist Webpack 3.x and Babel 6.x project without all the clutter for playing around with JavaScript features. I have also included some random samples of code I've been collecting.

Source Code - REPL

References

Discuss on Twitter