I am trying to debug a SPF Webpart in VS Code but with mac osx(el capitan), I have installed the chrome debugger extension.

I took as a basis, Elio's post here: https://www.eliostruyf.com/how-to-debug-your-sharepoint-framework-web-part/

My procedure: I execute on the shell the following:

Softwares-MacBook-Pro:MacOS luis.valencia$ pwd
/Applications/Google Chrome 2.app/Contents/MacOS
Softwares-MacBook-Pro:MacOS luis.valencia$ .//Google\ Chrome --remote-debugging-port=9222
Softwares-MacBook-Pro:MacOS luis.valencia$

Chrome is opened without any problems:

Then on vs code I execute

gulp serve

(this opens firefox, not chrome)

I had breakpoints already, then I can see the workbench and when I add the webpart no breakpoints are hit.

So I thought, I probably have to press F5 or the play button on vs code too:

first my launch.json file

  "version": "0.2.0",
  "configurations": [
      "name": "Launch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/app.js",
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "preLaunchTask": null,
      "runtimeExecutable": null,
      "runtimeArgs": [
      "env": {
        "NODE_ENV": "development"
      "console": "internalConsole",
      "sourceMaps": false,
      "outFiles": []
      "name": "Attach",
      "type": "node",
      "request": "attach",
      "port": 5858,
      "address": "localhost",
      "restart": false,
      "sourceMaps": false,
      "outFiles": [],
      "localRoot": "${workspaceRoot}",
      "remoteRoot": null
      "name": "Attach to Process",
      "type": "node",
      "request": "attach",
      "processId": "${command.PickProcess}",
      "port": 5858,
      "sourceMaps": false,
      "outFiles": []
        "name": "Launch localhost with sourcemaps",
        "type": "chrome",
        "runtimeExecutable" : "/Applications/Google Chrome 2.app/Contents/MacOS/Google Chrome",
        "request": "launch",
        "url": "http://localhost:4321/temp/workbench.html",
        "webRoot": "${workspaceRoot}/src",
        "sourceMaps": true

If I try launch with sourcemaps: enter image description here

I get this error: Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED

If I try just launch I get this: Attribute 'program' does not exist ('/Users/luis.valencia/Documents/SharepointFrameworkSamplesRepo/PnPCrudSample/app.js').

Please note this is the default launch.json file yoman generates, I only added the "launch with sourcemaps" at the end of the file.

If I try attach only: Cannot connect to runtime process (timeout after 10000 ms).

If I try attach to process: I get two options to attach, gulp and gulp 2530, I tried both:

If I select 2530, a breakpoint is hit, but on a file called timer.js (not on my ts file)

If I select gulp only, same story.

I am willing to share my screen via TV or something if u think u can help me.

thanks guys you are awesome


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.