DEV Community

Wataru Ashihara
Wataru Ashihara

Posted on

5 1

Chrome attach debug with WebStorm

1) Launch chrome with a command described in vscode-chrome-debug - Attach. Here we use port 9929 for the Chrome Debugging protocol (--remote-debugging-port=9229). Confirm that chrome properly listens the port:

$ netstat -an | grep 9229
tcp        0      0 127.0.0.1:9229          0.0.0.0:*               LISTEN

$ lsof -i :9229
COMMAND   PID USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
chrome  18347  wsh  132u  IPv4 729759      0t0  TCP localhost:9229 (LISTEN)

2) On WebStorm, create a Configuration of "Attach to Node.js/Chrome":
image.png

3) Start debug with the created configuration. A dialog appears with the list of the opened tabs, then choose the one you want to debug (Here I choose Friendly Chat from Firebase tutorial).

image.png
image.png

Way to go!

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more