基础调试

基础调试

Dom元素、CSS、JavaScript 的相关调试方法

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

前端/前端/前端开发调试 38     0     5651

Chrome 开发者工具菜单这么多,该怎么下手呢?别担心,从这一章开始,我们将从实际的场景出发,通过简单的例子来学习如何利用 Chrome 开发者工具帮助我们进行前端的调试。

2.1 DOM 元素的相关调试方法

前端的调试工作大部分时间都是在与页面打交道,而页面调试的最关键就是要定位到对应的 DOM 元素。在简单的页面中,我们可以通过阅读代码来进行定位。但在实际的生产过程中,一个 html 页面的代码往往有五六百行甚至上千行(还可能夹杂着 JS 或者 CSS 代码块),此时再通过阅读代码进行定位无疑是一件费时费力还容易出错的工作。

这个时候就需要工具来帮忙了,通过 Chrome 开发者工具上的元素选择按钮以及 Element 我们可以快速定位想要查看的页面元素。需要用到的按钮和菜单分别是下面两个。

接下来让我们通过一个简单的例子,来学习一下 DOM 元素的定位方法。

我们可以点击菜单最左边的元素选择按钮(快捷键:Ctrl + Shift + C),然后可以直接在页面上用鼠标来定位我们想看的元素。在此模式下鼠标定位到的元素,会在右边的 Element 面板中显示,如果有父级元素也会自动展开。同样的,在 Element 面板中,我们将鼠标移动到 DOM 元素的代码上时,左边页面上也会对应标记出来。这样就很方便我们查看 DOM 的结构。

除此之外,Chrome 还允许我们直接在 Element 面板中对 DOM 进行编辑和修改,并且结果会实时反应在页面上。我们可以对 DOM 元素内的内容进行编辑,也可以通过鼠标右键唤出菜单来对元素本身进行剪切、复制、强制触发效果(如 hover)等操作。在下面的例子中,我们修改了 div 显示的内容以及调整了列表的节点顺序。

这也就意味着,我们可以直接在 Chrome 中进行页面的修改和调整,等效果满意之后再将代码放回到我们的项目中。这样大大节省了我们的调试工作,与过去代码修改、保存、刷新页面的调试流程来说,简直是工业时代和石器时代的差距了。

2.2 CSS 的相关调试方法

在上一节介绍 Element 菜单的用法时,相信已经有眼尖的小伙伴看到右边的 Styles 标签以及熟悉的盒子模型了。没错,当我们选择了 DOM 元素时,该元素 CSS 相关的内容就会出现在右边。

同样地我们也可以直接在 Element 面板中直接修改 DOM 元素的 CSS 样式。我们可以屏蔽某些样式或者添加编辑某些样式,所有的修改操作都会实时反应在页面上。知道这个之后,那么在需要进行 UI 微调的时候,只要在 Chrome 上调试好,把代码复制到项目中就可以了。在下面的例子中,我们调整了盒子的宽度、边框等样式。

2.3 JavaScript 的相关调试方法

前面我们介绍了 DOM 元素和 CSS 的相关调试。这一小节我们来介绍一下前端的灵魂,JavaScript 的相关调试方法。因为现代的网站 JavaScript 文件一般都分离出来了,所以这里就需要使用到 Sources 面板了。

在 Sources 面板中,包含了当前页面所用到的各种资源。包括了 html、css、js、图片等其他的资源,我们都可以在面板左边找到。

在这个例子中,我们可以看到左边列出了 html 和 js 文件。点击文件,在右边便会展示出文件的内容,点击下方 {} 按钮就可以对代码进行美化,便于我们观察。如果是 js 文件,还会有右边显示堆栈信息的面板来帮助我们进行调试。

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

评价

38

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

签到有礼

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

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

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

金币可以用来做什么?