使用chrome进行简单调试

最新推荐文章于 2024-03-30 19:15:52 发布

原创最新推荐文章于 2024-03-30 19:15:52 发布 · 519 阅读

1 ·

CC 4.0 BY-SA版权

本文指导如何在本地环境中创建HTML和JavaScript文件，并利用Chrome浏览器的开发者工具进行调试。通过实例展示如何查看元素、控制台错误及调试信息，以及如何调整代码布局和执行流程。

使用chrome进行调试testtest

1.在本地新建一个文件夹
结构如下
这里写图片描述
包含一个index.html文件
js目录下包含一个test.js文件
index.html内容如下

<html>
  <head>
  <script src="js/test.js"></script>
  </head>
  <body>
    <table id="tableId">
      <thread>
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
      </thread>
      <tbody>
        <tr>
          <td>a1</td>
          <td>b1</td>
          <td>c1</td>
        <tr>
        <tr id="secondLine">
          <td>a2</td>
          <td>b2</td>
          <td>c2</td>
        <tr>
        <tr>
          <td>a3</td>
          <td>b3</td>
          <td>c3</td>
        <tr>
      </tbody>
    </table>
  </body>
</html>

test.js内容如下:

var a = document.getElementById("secondLine");
alert("complete")

创建完毕后使用chrome浏览器打开index.html如下图,右键点击检查。
这里写图片描述
出现chrome的调试工具
如下图：

首先看第一排的所有标签并介绍它们的用处:

名称	作用
elements	显示元素详细信息的标签栏
console	控制器标签栏,用于打印当前页面运行过程中产生的调试信息等
sources	运行所需要的资源,以及调试过程要进行操作的地点
network	显示网络请求信息详情
timeline	用来记录和分析当前页面消耗资源的状况
profiles	分析性能时配合timeline使用
resources	当前页使用的浏览器资源以及cache等的显示地点
security	查看安全权限情况
audits	冗余css检测功能

1.Elements
查看html页面文档的
html区域显示的是当前页的html加载完毕后的html代码(可能会包含js和css等)，
html区域应该和左侧的元素描述区域结合使用，
如图所示，当我选取一个id为secondLine的tr元素
在右侧style标签栏就会显示它的样式
computed标签栏以图文的形式显示tr元素的布局
如下图
这里写图片描述
properties标签栏用于显示选中元素的属性和方法,以及在dom对象中的详细信息,例如父子节点,兄弟节点的信息

2.console
当前页运行的错误,调试信息都会打印在这里
例如
在test.js中添加
console.log(“aaa”)
a.test();
这里写图片描述
由于a对象没有test方法,所以报错。

console下的简单调试
这里写图片描述

这时修改下index.html代码,把script标签移到table标签结尾,如下:
index.html内容如下

<html>
  <head>

  </head>
  <body>
    <table id="tableId">
      <thread>
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
      </thread>
      <tbody>
        <tr>
          <td>a1</td>
          <td>b1</td>
          <td>c1</td>
        <tr>
        <tr id="secondLine">
          <td>a2</td>
          <td>b2</td>
          <td>c2</td>
        <tr>
        <tr>
          <td>a3</td>
          <td>b3</td>
          <td>c3</td>
        <tr>
      </tbody>
    </table>
    <script src="js/test.js"></script>
  </body>
</html>