使用chrome进行简单调试

来源：互联网发布：詹姆斯琼斯知乎编辑：程序博客网时间：2024/05/08 09:49

使用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>

保存后,重新打开刷新。
这里写图片描述

0 0