正文

VScode常用几个前端插件live HTML previewer和debugger for chrome的配置

IP云
IP云V管理员/11 阅读
06/21
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

之前一直都是用sublime Text和chrome配合来写前端的页面，自从知道了有liveReload这个神奇的插件之后感觉爽翻了啊。好吧跑远了........

话说最近微软搞了个VScode，听说好像很牛逼的样子，通过扩展通杀各种语言，就冲着信仰去了解了下这个神奇的编辑器到底肿么样。

下载安装还是很傻瓜的，直接官网下载安装包https://code.visualstudio.com/，傻瓜安装（嗯我的是windows，mac或者linux请参照官网的指示安装）。

安装完后VScode自带了emmet和一些sublime里面常见的插件，不扯了，说正事。

debugger for chrome绝对是前端开发少不了的插件，它可以直接在VScode上调试JavaScript程序（其实我觉得chrome的开发者工具已经很好使了，这个无非就是更装逼一点而已）。

Ctrl+P 然后输入

ext install debugger-for-chrome

安装完后会弹出一个lunch.json配置文件

{
"version": "0.2.0",
"configurations": [
{
"name": "Launch flex.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceRoot}/flex.html"
},
{
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/flex.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
},
{
"name": "Attach to Chrome, with sourcemaps",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}

name属性就是在启动旁边那里显示可选择调试方式的名称，随便写只要能记住就行，根据配置的类型一共有3中不同的调试方式

最简单的就是第一种不需要服务器的直接lunch打开本地文件，千万要记得file的路径一定要写成${workspaceRoot}/xxx.html，不要写完整的路径，否则VScode是找不到外部的JavaScript文件的，最明显的就是文件在chrome打开了，回到js文件打断点的时候就会提示Breakpoint ignored because target path not found。

第二种是需要自己搞一个服务器容器比如Apache，比较VScode没那么聪明，它才不会自己给你建一个临时服务器，我直接用node的http-server插件，反正不是开发什么大型网站.......这种方式适合有后台数据交互的调试。

第三种attach模式是用chrome的远程调试API，我还没试过，官方给的方法是

  • Right click the Chrome shortcut, and select properties
  • In the "target" field, append --remote-debugging-port=9222
  • Or in a command prompt, execute <path to chrome>/chrome.exe --remote-debugging-port=9222

在chrome浏览器快捷方式后面加上--remote-debugging-port=9222然后双击启动，或者直接命令行输入chrome的地址加上--remote-debugging-port=9222参数启动。嘛.....这个我待会再去研究研究怎么弄。

接下来说说live HTML previewer这个插件，本来我是想找找有没有liveReload插件的，结果没找到，live HTML previewer有点像dreamwaver里面的拆分模式，就是直接在VScode里面预览html页面，这对于初期写静态页面的布局还是很方便的，点击左边最下面那个扩展，然后输入live HTML previewer安装就行，启动方式是按F1在输入Show side preview或者直接按Ctrl+Q，接着按下S。实测这个预览的渲染好像跟chrome有点不太一样，慎用。

嗯，顺便说一下还有ESlint这种js语法检查工具，Path Intellisense智能路径提示等一些比较好用的扩展工具