在VisualStudio Code中调试html页面（JS,canvas,easeljs)

一、 效果目的

在VSCode里，直接F5打开html页面，并且可以在编辑器里编辑代码

二、 工具准备

安装vs code (在官网下载)
安装nodejs : 输入npm install node
安装canvas：输入npm install canvas
安装easeljs：输入 npm install easeljs
VSCode 上装一个插件：Debugger for Chrome.

三、 配置文件更改

1. 用VSCode装载项目
   
2. 然后按F5。选择Chrome。
   
3. 然后出现个配置的提示，和打开了launch.json这个文件。在 这个文件里添加一段配置信息
   {
   “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":"C: \\ ProgramFiles(x86) \\ Google \\ Chrome \\ Application \\ chrome.exe",//改成您的Chrome安装路径"sourceMaps":true,"webRoot":" \end{gathered}$${workspaceRoot}”,
   // “preLaunchTask”:“build”,
   “userDataDir”:"${tmpdir}",
   “port”:5433
   }
   
4. 更改调试方式
   

四、 .然后 F5。结果如下

五、 附html代码（src 要给成你自己的easeljs安装地址）

参考
1.H5动画入门 Easeljs篇（学习笔记）https://www.jianshu.com/p/93e12e9102de
2.使用VSCode 断点调试 js项目，html页面https://blog.csdn.net/arvin0/article/details/53673351