JS_JavaScripts学习笔记1-配置及工具开发helloworld

最新推荐文章于 2023-09-21 05:58:33 发布

Deveuper

最新推荐文章于 2023-09-21 05:58:33 发布

阅读量434

点赞数

分类专栏：网页JS开发编程开发

编程开发同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

网页JS开发

1 篇文章 0 订阅

订阅专栏

安装必要的扩展插件

1.VSCode界面很简洁安装完之后所有的功能都一目了然，我们需要安装插件可以点击如图的工具和语言：

2.安装以下两个插件如图：（你也可以选择其他这里只是示例）

Code Runner

HTML CSS Support

Debugger for Chrome

3.调试Debug

当调试一个js文件时，需要创建一个html文档，并在里面添加js方法,简单创建个文件，可以直接拖到编译器上，内容如下：

<html>
    <body>
        <script>windows.alert('Hello World')</script>
    </body>
</html>

4.配置调试的浏览器

文件放到编译器之后，我们按下F5会有一个弹出框提示我们使用什么环境，因为我们还没创建所以选择more按钮添加插件能让我们进行调试：(把其中的windows.alert换成alert)

Paste_Image.png

5.配置VScode调试插件

进入扩展商店列表我们可以选择Debugger for Chrome插件进行安装，安装完后我们需要重启环境才会生效，或者点击重新加载：

安装完之后再次按下F5时就可以看到chrome了，选择之后编译器会在当前html文件同目录下创建一个.vscod文件夹，里面有一个launch.json的配置文件，同时在编译器显示出来：

6配置IIS

.接下来本来是需要配置IIS的但是目前处于学习阶段，后面也不是为了学习web，所以我们就不去配置什么本机的IIS服务了，可以直接在url对应的值填上路径，不知道路径是什么可以先自己用浏览器打开，直接复制浏览器的地址到 url对应的值里面如下：

(把其中的url换成自己的helloworld.js的路径)

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "file:///C:/Users/xfdg/Desktop/jsCode/helloworld.html",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

7.运行

完成上述步骤后，按下F5可以正常运行

本人还在摸索阶段，有错误的地方请各位朋友指正

Deveuper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS_JavaScripts学习笔记1-配置及工具开发helloworld

配置环境 VScodehttps://www.jianshu.com/p/4030be25c98e跟着写：菜鸟学院：http://www.runoob.com/js/js-tutorial.html廖雪峰网站：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001...
复制链接

扫一扫