SPFx斷點和Visual Studio Code（而不是Chrome）中的調試

Question

我正在嘗試找到一種方法來從Visual Studio Code而不是從Chrome調試本地SPFx工作台，但是我找不到關於如何將Chrome附加到Visual Studio Code並在我的React TypeScript Webpart（Web應用程序）中遇到斷點的任何指南。 ）。 有什么好的指南嗎？

這可能有些瑣碎，但是我是react-gulp-vs代碼領域的新手，在過去，使用Visual Studio和IExplorer調試javascript相對容易，而且我想知道Visual Studio Code是否也存在簡單的設置。

謝謝！

Answer 1

您可能需要此VS Code擴展。

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Answer 2

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

Office Dev團隊的官方文檔在這里： 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

要點與launch.json配置在這里： 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"
            ]
        }
    ]
}

請讓我知道是否有任何問題。