Skip to content

Instantly share code, notes, and snippets.

@auchenberg

auchenberg/readme.md

Last active April 4, 2017 20:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save auchenberg/da34dc6189993d32c454b6fda0028f87 to your computer and use it in GitHub Desktop.
Save auchenberg/da34dc6189993d32c454b6fda0028f87 to your computer and use it in GitHub Desktop.
Download ZIP
Webpack logging in DevTools
Raw
readme.md

Webpack logging in DevTools

This project aims to enable webpack logging to be surfaced in browser DevTools, through a simple extension for Webpack and/or https://github.com/webpack/webpack-dev-server

Use-cases

  1. As a developer I can see my Webpack logs and errors in the DevTools console together with the rest of my logs.

Value prop

Central place for logs and errors regardless if they are client-side, server-side or coming from the build system.

How?

We can leverage the DevTools console standard proposed by https://craig.is/writing/chrome-logger, which enables transfer of server-side logs per request through a custom HTTP response header.

Flow

  1. Attach listener to Webpack stats
  2. Cache logs per bundle/output file
  3. On inbound HTTP request for bundle
  4. Grab cache entries in cache for the requested file
  5. Serialized through standard, and attach to the file request on x-chrome-logger header
  6. Bam!

Implementation

The console API is already implemented in Node/JS: https://github.com/olahol/express-chrome-logger/blob/master/index.js

My thinking is to simply open a PR to webpack-dev-server with the support, and add a config option, as it seems to be the simplest place to validate the value of this functionality.

Adding support to webpack-dev-middleware, could be valuable too

Browser Support

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment