vscode进行对html的配置及调试

必要插件安装

1. Open HTML in Default Browser

用默认浏览器打开 HTML 文件
在资源管理器中，HTML 文件右键显示 在浏览器中打开 菜单
在编辑器中，HTML 文件右键显示 在浏览器中打开 菜单
支持语言：英语(en)、简体中文(zh-cn)、繁体中文(zh-tw)、日语(ja)
快捷键支持: ctrl + 1

2. Open in Browser（安装推荐）

rewrite the code with TypeScript, now it dependes on a tiny library npm/opn
support more browsers: Chromium(Mac only), Firefox Developer Edition(Mac only), Edge(Windows only, sometimes it won’t work)
（主要功能点）you can open any type of file with the default program, not only html file.（可以说是对Open HTML in Default Browser的扩展补充，功能更加强大，）
（效果图 如下）

1. Debugger for Chrome（安装推荐）

debugger for chrome绝对是前端开发少不了的插件，它可以直接在VScode上调试JavaScript程序

调试配置设置

2. 在调试中选择“使用本机chrome调试”
3. 在跳出的launch.json中添加以下代码（转自：https://blog.csdn.net/arvin0/article/details/53673351 ）

   {
   “name”: “使用本机 Chrome 调试”,
   “type”: “chrome”,
   “request”: “launch”,
   “file”: “$$\begin{gathered} workspaceRoot/index.html",//"url":"http://mysite.com/index.html",//使用外部服务器时,请注释掉file,改用url,并将useBuildInServer设置为false"http://mysite.com/index.html"runtimeExecutable":"D: \\ GoogleChromev71.0.3578.80_{x}64 \\ GoogleChromev71.0.3578.80_{x}64 \\ chrome.exe",//改成您的Chrome安装路径（需要进行对自己的浏览器安装路径进行修改操作）"sourceMaps":true,"webRoot":" \end{gathered}$${workspaceRoot}”,
   // “preLaunchTask”:“build”,
   “userDataDir”:"${tmpdir}",
   “port”:5433
   }

调试操作

1. 按F5进行调试或者在菜单栏上的“调试”下选择“启动调试”。
   1. 有时F5经常没用，最好点击“启动调试”，进行手动调试
   2. 这个调试配置是需要调用Chrome来进行调试启动的，所以Chrome浏览器要求是没有被启动的，这样才能成功调动（链接：https://blog.csdn.net/xdcx950288/article/details/80640918 ）
   3. 当文件位置没有放置合适的也会导致调试失败
      例子：