你不知道的浏览器调试技巧 | 青训营笔记

清隆
91 阅读2分钟

文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的第6天

作为一名前端程序员，肯定得会调试自己的代码，没有人能一次写出完美的代码。

在本次青训营我学习到了一些借助谷歌浏览器的调试技巧，总结分享出来。

本文介绍了常用的 CSS 样式调试和 JS 日志输出

CSS调试

先展示一下我们要调试的代码：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .box1 {
        height: 100px;
        width: 100px;
      }
      .box2 {
        width: 100px;
        height: 100px;
        width: 200px;
        height: 200px;
      }
      .red {
        background-color: red;
      }
      .red:hover {
        background-color: pink;
      }
      .blue {
        background-color: blue;
      }
      .blue:hover {
        background-color: skyblue;
      }
      .radius {
        border-radius: 20%;
      }
    </style>
  </head>
  <body>
    <div class="box1 red radius"></div>
    <div class="box2 blue"></div>
  </body>
</html>

页面展示如下，通过右键-检查或F12打开调试工具；

然后点击可以点击要调试的元素，在右侧会展示生效的样式

image.png

我们可以取消一些语句的勾选，改变元素的样式

image.png image.png

鼠标移动到数字上，可以拖拽修改样式数字；或直接点击，直接输入要修改的数字

image.png

也可以点击上方的 :hov 和 .cls，切换元素的类与伪类

image.png

image.png

你还可以右键元素，会显示元素菜单，里面有很多调试选项供你使用

image.png

一般常用的元素CSS调试就这些了，接下来聊JS的调试

JS调试

JS调试的主要内容就是打印日志，让我们把调试工具切换到控制台，通过 console 的方法打印各种日志，有信息、警告、错误……

image.png

注意最后一条日志，我们用占位符修改了 console.log 的输出格式

常用的占位符有

  • %s：字符串
  • %o：对象
  • %c：样式
  • %d：数字

最后再介绍两个特殊又实用的 console 方法

console.table 能将对象或数据以表格的形式打印出来

image.png

默认的元素打印看不了什么信息，而 console.dir 能将其以树型的形式打印出来，查看其属性

image.png image.png

更多日志相关的内容可以上MDN查看

结语

如果喜欢或有所帮助的话，希望能点赞关注，鼓励一下作者。

如果文章有不正确或存疑的地方，欢迎评论指出。

avatar
文章
阅读
粉丝