VSCODE 扩展之 Debugger for Firefox 的使用

有什么用?

• 可以让你在 VSCODE 里打的断点在浏览器中可用

• 运行时发生的错误在 VSCODE 中可以更直观的发现

安装 Debugger for Firefox

配置

1. 在项目根目录的.vscode目录(没有则新建)中新建launch.json.

2. 基本配置项,针对Vue项目

{
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "开始调试", // 项目名字,自己定义
      "url": "http://localhost:8080", // 打开调试浏览器的首页
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }],
      "profile": "dev-edition-default" // 浏览器的用户档案,见下文
    }
  ]
}

将上面的代码复制到 launch.json 中.

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

将上面的代码复制到 vue.config.js 中

3. 关于 profile

其实去掉profile这个属性是完全可以正常调试的

但会发现每次都是打开一个全新的浏览器,自定义的浏览器设置全部变为默认,甚至扩展都没有了(Vue Devtools也没有了)

那么就需要用到这个设置了

profile 是配置使用哪个设定档案的.因为火狐浏览器的设置可以存为多份,这个就是设置使用哪一份的.

在火狐的地址栏中输入about:profiles即可查询出所有的档案

然后选择要使用哪个设定档案,把名字填入profile中即可.我使用的是dev-edition-default,你也可以自己新建一份.

目前发现的问题

浏览器的密码填充功能在调试模式下不会自动运行,每次都需要重新设置

参考

https://github.com/firefox-devtools/vscode-firefox-debug/issues/45