VSCode

在VSCode中进行调试

在VSCode中本地静态页面的调试和服务器上页面的调试

2018-09-23侠课岛    初级拔高       

前端/前端/前端开发调试 13     0     11635

在前面的章节中,我们主要介绍了利用 Chrome 的开发者工具进行前端的调试。在这一章节中,我们将介绍与我们开发息息相关的编辑器的调试方法。

这里我们主要介绍由微软出品的 Visual Studio Code(简称 VSCode)编辑器中有关前端的调试方法。VSCode 作为一款轻量级的文本编辑器本身就拥有强大的功能,再加上丰富的插件让我们可以编写任何语言的程序。我自从用上了 VSCode 之后,就彻底抛弃了 Sublime 了。

当然,作为前端的调试,我们基本是离不开 Chrome 的,比较我们编写好的代码最终也只能在浏览器中才能执行。因此我们首先就要在 VSCode 中安装好由微软官方出品的 Chrome 调试插件—— Debugger for Chrome。我们在 VSCode 的商店中搜索然后点击安装即可。安装完成后就让我们开始进行调试吧~

4.1 本地静态页面调试

为了方便我们的调试,我们这一次准备了一个非常简单的 Demo 页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>VSCode TESTER</title>
</head>
<body>
  <p>VSCode 调试用页面</p>
  <div class="container" id="container">

  </div>

  <script src="./index.js"></script>
</body>
</html>
var container = document.getElementById('container')

alert(`HEY! Can you see me?`)

container.innerHTML = `HEY, Here is changed!`

我们打开后,会先出现一个弹窗,然后再页面上显示两句话。

嗯,当然,我们这一章是要讲 VSCode 中的调试。所以我们就暂时离开 Chrome 回到 VSCode 中来。我们在 VSCode 中给 index.js 中的 alert 方法打上断点。

等等,别直接打开 html 文件了。那样肯定是不行的,因为断点是在 VSCode 中设置的,所以我们接下来要配置一下测试部分。在菜单栏的右边我们点击调试按钮(快捷键:Ctrl + Shift + D)进入调试界面。

在调试的界面中,我们选择添加配置,进入配置界面。毕竟 VSCode 可不知道我们每个项目的页面,我们需要针对项目手动进行一下配置。

在配置文件 launch.json 中,我们进行下面的配置。配置不难,需要注意的是路径的问题。重点在于 filewebRootwebRoot 是网站的根目录,一般默认是 VSCode 打开的那个目录。这个例子中 VSCode 是在 D:\LearningSpace\learning-book 下打开的,因此这就是 ${workspaceFolder} 的实际路径。而我们的示例文件是在 D:\LearningSpace\learning-book\Frontend dev-test\example\Chapter 4 目录下的,因此我们需要在 file 这里补全路径,${workspaceFolder}/Frontend dev-test/example/Chapter 4/index.html

最终配置完成的文件内容。

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "静态文件 Chapter 4",
      "file": "${workspaceFolder}/Frontend dev-test/example/Chapter 4/index.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "本地服务器调试",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

配置好之后,我们选择在调试菜单中选择刚才配置的选项。点击左边的三角就可以进入调试模式。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

13

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?