2017-03-19 97 views
0

我想找到一種方法來從Visual Studio代碼而不是從Chrome調試我的本地SPFx工作臺,但我找不到任何有關如何將Chrome附加到Visual工作室代碼,並在我的反應打字稿webpart(網絡應用程序)中打斷點。有沒有什麼好的指導如何做到這一點?SPFx斷點和調試從Visual Studio代碼而不是從Chrome

這可能是微不足道的,但我對react-gulp-vs代碼世界很陌生,在過去,使用Visual Studio和IExplorer調試javascript相對容易,我想知道如果Visual Studio Code也是如此。

謝謝!

回答

0

在這個快速更新。 @gruss對於Chrome的調試器是正確的,但我想更進一步,並創建一個指南。

從Office開發團隊這裏的官方文件: https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode

我發現非常有用的文章在這裏: http://www.eliostruyf.com/how-to-debug-your-sharepoint-framework-web-part

我還創建了一個位置: http://blog.velingeorgiev.pro/how-debug-sharepoint-framework-webpart-visual-studio-code

吉斯特一起推出。 json config here: https://gist.github.com/VelinGeorgiev/4a7b77ced7198df0a3898420d46f3405

此處粘貼的配置可供快速參考:

// Use Chrome browser to debug SharePoint Framework React webpart with Visual Studio Code on Windows 
// - Install "Debugger for Chrome" extension 
// - Add this configuration to the launch.json 
// - Close all Chrome browser active instances 
// - Start the SPFx nodejs server by executing "gulp serve" 
// - Go to VS Code debug view (top menu -> View -> Debug) 
// - Hit the play (start debugging) button 
// Happy debugging! 
// Full guides 
// http://blog.velingeorgiev.pro/how-debug-sharepoint-framework-webpart-visual-studio-code 
// https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode 
{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "name": "SPFx Local", 
      "type": "chrome", 
      "request": "launch", 
      "url": "https://localhost:4321/temp/workbench.html", 
      "webRoot": "${workspaceRoot}", 
      "sourceMaps": true, 
      "sourceMapPathOverrides": { 
       "webpack:///../../../src/*": "${webRoot}/src/*", 
       "webpack:///../../../../src/*": "${webRoot}/src/*", 
       "webpack:///../../../../../src/*": "${webRoot}/src/*" 
      }, 
      "runtimeArgs": [ 
       "--remote-debugging-port=9222" 
      ] 
     }, 
     { 
      "name": "SPFx Online", 
      "type": "chrome", 
      "request": "launch", 
      "url": "https://<your_tenant>.sharepoint.com/sites/<your_site>/SitePages/<your_webpart_page>.aspx", 
      "webRoot": "${workspaceRoot}", 
      "sourceMaps": true, 
      "sourceMapPathOverrides": { 
       "webpack:///../../../src/*": "${webRoot}/src/*", 
       "webpack:///../../../../src/*": "${webRoot}/src/*", 
       "webpack:///../../../../../src/*": "${webRoot}/src/*" 
      }, 
      "runtimeArgs": [ 
       "--remote-debugging-port=9222" 
      ] 
     }, 
     { 
      "name": "SPFx Online Workbench", 
      "type": "chrome", 
      "request": "launch", 
      "url": "https://<your_tenant>.sharepoint.com/_layouts/workbench.aspx", 
      "webRoot": "${workspaceRoot}", 
      "sourceMaps": true, 
      "sourceMapPathOverrides": { 
       "webpack:///../../../src/*": "${webRoot}/src/*", 
       "webpack:///../../../../src/*": "${webRoot}/src/*", 
       "webpack:///../../../../../src/*": "${webRoot}/src/*" 
      }, 
      "runtimeArgs": [ 
       "--remote-debugging-port=9222" 
      ] 
     } 
    ] 
} 

請讓我知道是否有問題。

相關問題