您的位置：首页 > Web前端 > JavaScript

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

2020-01-14 21:35 330 查看

一、 效果目的

在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”: “workspaceRoot/index.html",//"url":"http://mysite.com/index.html",//使用外部服务器时,请注释掉file,改用url,并将useBuildInServer设置为false"http://mysite.com/index.html"runtimeExecutable":"C:ProgramFiles(x86)GoogleChromeApplicationchrome.exe",//改成您的Chrome安装路径"sourceMaps":true,"webRoot":"{workspaceRoot}/index.html", // "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html "runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径 "sourceMaps": true, "webRoot": "workspaceRoot/index.html",//"url":"http://mysite.com/index.html",//使用外部服务器时,请注释掉file,改用url,并将useBuildInServer设置为false"http://mysite.com/index.html"runtimeExecutable":"C:ProgramFiles(x86)GoogleChromeApplicationchrome.exe",//改成您的Chrome安装路径"sourceMaps":true,"webRoot":"{workspaceRoot}”,
    // “preLaunchTask”:“build”,
    “userDataDir”:"${tmpdir}",
    “port”:5433
    }
  4. 更改调试方式

四、 .然后 F5。结果如下

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

<html>
<head>
<title>动画特效</title>
<script src="C:\Users\Administrator\node_modules\easeljs\lib\easeljs.js" charset="utf-8"></script>
</head>
<body onload="init();">
<canvas id="demoCanvas" width="500" height="300"></canvas>
<script>
function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
stage.update();
}
</script>
</body>
</html>

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

  • 点赞
  • 收藏
  • 分享
  • 文章举报
junxuezheng 发布了34 篇原创文章 · 获赞 1 · 访问量 4368 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航