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

作者：煮酒与君饮 | 2024-07-24 11:48:54

踩

vscode调试html

一、效果目的

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

二、工具准备

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

三、配置文件更改

用VSCode装载项目
然后按F5。选择Chrome。
然后出现个配置的提示，和打开了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:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安装路径 "sourceMaps": true, "webRoot": "$ {workspaceRoot}”,
// “preLaunchTask”:“build”,
“userDataDir”:"${tmpdir}",
“port”:5433
}
更改调试方式

四、 .然后 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/煮酒与君饮/article/detail/874536

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

一、 效果目的

二、 工具准备

三、 配置文件更改

四、 .然后 F5。结果如下

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

一、效果目的

二、工具准备

三、配置文件更改

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