1

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": [
        "--nolazy"
      ],
      "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 127.0.0.1:9222).

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

https://github.com/Microsoft/vscode-chrome-debug

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.