VS Code uses FireFox to debug web pages

Overview

1. Install the Debugger For Firefox extension
2. Set the configuration file (depending on the mode, the operation is different)
3. Start debugging

Let's first understand what debugging modes are available mode:

• launch: Each time you debug, a new browser process will be created, and the process will be terminated when you stop the test.
  • re-Attach: true: The process is not ended when the test is stopped, and the debugging can be re-attached to speed up the test again.
    • re-Attach It is also suitable for WebExtension debugging, each test, the browser plug-in will be reinstalled as a temporary extension
• attach: Attach debugging to the existing browser process , this process needs to be manually enabled to allow remote debugging . You can debug existing web pages on the network.

The following reference is from the description of Debugger For Firefox-Visual Studio Marketplace , and the translation is integrated.

Use launchmode debugging

1. generally

{
    
    
    "version": "0.2.0",
    "configurations": [
        {
    
    
            "name": "Launch index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true, // 启用 reAttach
            "file": "${workspaceFolder}/index.html" // 调试工作区下的 index.html
        }
    ]
}

2. When the page you want to run the debugger on the WebServer, you need to configure urland webRootproperty, urlwhile pointing to a directory must /end:

//...
    "url": "http://localhost/index.html",
    "webRoot": "${workspaceFolder}"
//...

• May be arranged pathMappings, then do not set webRootup, the code above is equivalent to:

{
    
    
    "version": "0.2.0",
    "configurations": [
        {
    
    
            "name": "Launch localhost",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost/index.html",
            "pathMappings": [{
    
    
                "url": "http://localhost",
                "path": "${workspaceFolder}"
            }]
        }
    ]
}

When you urlwhen a file or resource to the project under a subdirectory, configuration pathMappingsis necessary. such as:http://localhost/login/index.html

Use Attachmode debugging

1. To use this mode, you need to start a Firefox process that allows remote debugging from the terminal. If you are not using the developer version of Firefox, you must configure this.

• Open the developer tools ( F12, then F1), check: Enable browser chrome and add-on debugging toolboxes and Enable remote debugging
  

• Or set the following parameters on the about:config page:
  directly enter about:config in the address bar, search and set the following configuration on this page.

Placement name	Settings	description
devtools.debugger.remote-enabled	true	have to
devtools.chrome.enabled	true	have to
devtools.debugger.prompt-connection	false	Recommended role: prompt pop-up window when closing debug connection
devtools.debugger.force-local	false	When you need VS Code to attach debugging to the Firefox browser on a different device, set it to false(use the host attribute in the attach configuration)

2. Then close the browser, and execute a command similar to the following in the terminal: It
   depends on the program path.

Windows:
win+ R, enter cmd, enter the following according to your own Firefox browser installation address and press Enter:

"C:\Program Files\Mozilla Firefox\firefox.exe" -start-debugger-server

• VS Code directly in the terminal or run PowerShell may appear 表达式或语句中包含意外的标记wrong. Can cdthe browser executable directory use firefox.exe -start-debugger-serverexecution.

OS X

/Applications/Firefox.app/Contents/MacOS/firefox -start-debugger-server

Linux

firefox -start-debugger-server

3. Configured in the project launch.json.

{
    
    
    "version": "0.2.0",
    "configurations": [
        {
    
    
            "name": "Launch index.html",
            "type": "firefox",
            "request": "attach"
        }
    ]
}

If you need to test on the Webserver, but also to set urland WebRootproperties, see previous section.

Skipping (“blackboxing”) files

Path mapping

Debugging WebExtensions

Further optional configuration properties

Overriding configuration properties in your settings

Troubleshooting

Afterword

Because in fact I just want to preview the page effect, I didn't use so many things, so I didn't read the following.
It may be the reason why my Firefox browser has been modified too much by magic, and some abnormalities have appeared, which cannot be debugged well [笑哭.jpg]. Give up
this small requirement doesn’t need to be so troublesome, at first it was just a shortcut key for convenience