前端调试工具

1. 使用Debugger for Chrome工具来调试代码

• 安装Debugger for Chrome扩展
  
• 修改.vscode中launch.json的配置：
  

{
  "version": "0.2.0",
  "configurations": 
  [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch index.html",
      "sourceMaps": true,
      "file": "${workspaceRoot}/index.html"
    }
  ]
}

此时可在vscode的控制台直接调试代码

2. 安装live-server

• 安装live-serverl扩展

• 修改live-server的settings.json配置（按快捷键ctrl+shirt+p后选择红框中的选项）
  
  添加以下代码：

	"workbench.statusBar.visible": true,//是否显示golive状态栏，默认是false，改为true
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "liveServer.settings.port": 5500,//设置本地服务的端口号
    "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
    "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
    "liveServer.settings.NoBrowser": false,
    "liveServer.settings.ignoredFiles": [//设置忽略的文件
        ".vscode/**",
        "**/*.scss",
       	"**/*.sass"
    ]

• 修改.vscode中的launch.json文件的配置（配置中添加以下代码）：

	{
      "type": "chrome",
      "request": "attach",  
      "name": "Attach to Chrome",   
      "port": 9222,   
      "webRoot": "${workspaceFolder}"   
    },  
     {
      "name": "Launch localhost",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5500",
      "webRoot": "${workspaceFolder}"
    },

• 修改谷歌浏览器的属性（添加括号里面的配置）：

--remote-debugging-port=9222

• 点击下方的Go live按钮，启动live-server服务器
  
• 之后再启动Attach to Chrome