Search code examples
javascripteslintjavascript-debugger

How to run eslint so that I can attach a debugger?

I am trying to debug a eslint rule through console.log but it's not the most efficient way to debug. I am running eslint through command line.

How can I run eslint so that I can attach a debugger (either VSCode debugger or Chrome debugger) to it? I see I can pass a debug url to VSCode, but I don't know how to get the url.

I found this question which points to http://eslint.org/docs/developer-guide/development, but I get a page not found and I've tried looking for debug/debugger/development/inspector, but didn't find anything in the docs.

Solution

  • Running eslint is running a NodeJS script so you can run node with --inspect switch.

    1. Get the debug url

    1. Find the location of eslint script (likely node_modules/.bin/eslint)
    2. Run node in inspect mode : node --inspect-brk {eslint_path} {file_path}

    For example : node --inspect-brk node_modules/.bin/eslint .

    1. You'll see a line Debugger listening on {url}, this is your debug url.

    2. Attach the debugging client.

    With Chrome

    1. Go to Chrome, type chrome://inspect in the url bar
    2. If "Discover network targets" is checked, you should be able to see node_modules/.bin/eslint ... under "Remote targets"enter image description here
    3. Likely a new Chrome window named "DevTools" with the source code in debug mode should have popped up. If not, open the developer tools, and click on the Node logo and it should open the window.enter image description here
    4. The execution is stopped on the first instruction. You can now use Chrome debugger.

    With VSCode

    Set up (only needs to be done once)

    1. Click on "Run and Debug" on the left

    2. This step depends if you already configured your launch.js file.

      1. If you see a green triangle (it means you have configured it), click "Attach" next to the green triangle -> Add Configuration
      2. If you see a lot of text with three blue buttons (it's not configured yet), select "Show all automatic debug configurations" -> Add Configuration

    3. Choose "Node.js: Attach".

    4. Name your configuration

    Attach debugger

    Go to "Run and Debug" and click on the green triangle next to your configuration name.

    Note

    We use --inspect-brk in order to stop the execution right away, otherwise the execution will likely be done by the time you attach your debugging client. If you already added a debugger instruction in your code, then you can run --inspect and it will stop at the first debugger instruction.