浏览器调试步骤

Wannaer

已于 2024-05-15 18:00:34 修改

阅读量684

点赞数 10

分类专栏： JavaScript 调试工具文章标签： javascript 测试工具

于 2024-05-15 16:39:55 首次发布

本文链接：https://blog.csdn.net/Wannaer/article/details/138913483

版权

JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

调试工具

1 篇文章 0 订阅

订阅专栏

前言

在进行浏览器调试时，我们需要按照以下步骤进行操作。这些步骤包括确认调试环境、使用开发者工具进行调试、检查网络请求和响应、查看控制台输出、调试JavaScript代码、检查页面布局和样式等。通过这些步骤，我们可以快速定位和解决前端页面的问题，提升页面的质量和性能。
PS：希望这份浏览器调试步骤文档能够满足公司的要求。

你可能早有耳闻，也可能动手实践过，在 Chrome 中只要进行右键点击，出现的菜单里总有一个叫“检查”的选项。

点击它一下就会出现 Chrome 分析工具：
在这里插入图片描述

Chrome 前端分析工具简介

1、Element 模块

左边是已经解析好的 HTML，右边则是这个 HTML 元素所装载的 CSS 样式。

左上角的小箭头可以让我们快速定位页面中的块对应的 HTML 代码：
在这里插入图片描述
使用Ctrl + Shift + M 快捷键可以让我们进入移动端模式，开发移动端时非常有用：

2、Console 模块

在这里我们可以查看 JS 所执行的结果有没有报错，还可以直接执行 JS 进行调试，一些网站还喜欢在这里面放置招聘信息。
在这里插入图片描述

3、Sources 模块

Source 模块是网站所加载的文件，我们可以在这里直接给 JS 文件打断点：
在这里插入图片描述
当 Chrome 执行到你打的断点时就会停下等待你的指示，点击蓝色的小箭头（快捷键 F8) 可以让 Chrome 继续执行。

右边显示了一些当前环境下的变量等信息，同时文件中也会显示出每个变量目前是什么值。
在这里插入图片描述
如果你遇到了一个奇怪的 BUG，不妨打个断点试一试。解决后也不要忘记把断点取消掉喔。

3、Network 模块

Network 模块会显示出此网站请求了什么链接，我们可以看、可以重发，但是没法拦截，不过对于大部分分析已经足够了。

分析 API 也在这里进行，我们之后再来详细介绍它。
在这里插入图片描述

4、Performance 模块

Performance 模块给出了网站运行状况的一些报告，打开后我们按 Ctrl+E 会从当前点记录运行情况，按 Stop 会给出这段时间的分析。
Ctrl+Shift+E 则会刷新页面并自动记录，无需手动按 Stop，Chrome 会在网页运行完毕后自动停止。
在这里插入图片描述

按最右面小齿轮会展开一个控制面板，我们可以选择 Network 和 CPU 选项来降低性能以测试在网络较差/低性能机器上网页的运行情况，还可以自定义：
设置之后会根据你设置的参数来加载，比如设置为 offline 会完全使用缓存。

5、Application 模块

Application 模块存储了一些网站设置在浏览器中的信息，进行登录认证的 Cookies 就是在这里查看。

详情我们之后再来详细介绍它。
在这里插入图片描述

6、其它的模块

在这里强烈建议安装 Vue Developement Tools，对之后的 Vue 开发很有帮助，可以清晰的查看每个组件、Vuex 状态、事件等信息，安装之后也会显示在这里面：
在这里插入图片描述

7、浏览器 F12 调试

在编写 JavaScript 代码时，如果遇见错误，首先在浏览器中运行我们的代码，然后 F12，查看错误信息。比如运行以下代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      alerttt("hello");
    </script>
  </body>
</html>

首先查看控制台信息，在控制台中会有报错提示，一般看这个就能知道问题是什么了。

在 Sources 中能够清楚的看到哪一行的代码出问题了，会有很明显地提醒。

如果我们想知道变量的值，在调试的时候，可以加一句 console.log(变量) 语句来打印出来，然后在控制台中看。console.log() 语句也是我们编程中经常需要使用的，因为有时候，我们也不能直观的一下就知道传递进来的值到底是什么，可能需要看半天的逻辑然后计算半天。直接打印出来的方式也有利于帮助我们判断，不过一般情况下大家记得调试完，要把这行语句注释掉或者删掉。

设置断点，逐步执行

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script>
      for (var i = 1; i <= 100; i++) {
        for (var j = 1; j <= 10; i++) {
          j = i * j;
          console.log(j);
        }
      }
    </script>
  </body>
</html>

首先运行上述代码，点击 F12 进行调试界面，点击 Sources，设置断点的方法很简单，直接左键点击代码旁边的数字行数。如下所示：

将变量添加到 Watch 窗口，实时查看它的值的变化，如下所示：

准备工作做好之后我们还需要点击一下刷新，如下所示，红色箭头所指的地方点击一下：

然后就可以通过点击运行按钮，逐行运行我们设置断点时的代码，并在 Watch 中查看变量值的变化，如下所示：

尝试分析 API

我们新建一个标签页，先打开 Chrome 分析工具，切换到 Network 一栏，否则不会记录喔。

在地址栏中输入 localhost:3300 首页地址看看进来了什么请求吧；

注意：这里我是本地运行项目，你们可以输入自己需要查看的项目地址就行。

请求着实有很多，有 JS、CSS、还有图片，不过这些都不是我们想要的，如果只看这些信息确实不好分析。

Chrome 已经替我们想好了，在上面一排小标签里我们可以选择显示哪些类型的请求，一起来探索下。

1、XHR 类型的请求

第一个 XHR 类型的请求是通过 JS 发起的请求，该项目是前后端分离，使用 JS 进行通信的，所以大部分我们所希望看到的请求都能在这里面看到：
在这里插入图片描述
点击一个试试：

我们所需要关注的基本就是这些：

/order/dicPubOrganize/GetPageList?pageNo=1&pageSize=20&pageType=0

/order/dicPubOrganize/GetPageList 这个是请求地址
?pageNo=1&pageSize=20&pageType=0 这些是 GET 方法的额外查询条件。
有时通过参数名字就可以猜出来是什么意思，比如这个请求就是分页查询，当前为第一页，每页二十条
在这里插入图片描述
Preview 和 Response 分别是预览回复内容和直接查看回复内容

2、JS/CSS/Img/Media/Font 类型的请求

这些请求看名字就知道是干什么的，可以一一点开看一下。

着重说一下 Media，查看媒体类型的请求一般会得到某个视频资源的下载地址。

3、DOC 类型的请求

在这里插入图片描述
DOC 也是我们需要关注的一个对象，地址栏中输入的链接所返回的请求会出现在这里。

注意：同时出于 SEO 和一些其他考虑，使用 SSR（服务器端）渲染，也就是说，虽然上面我们说了应该去看 XHR 请求但实际上如果只在地址栏中的地址进行查看，往往是得不到 API 的。

抓包的软件

如果你已经尝试过通过以上的方法抓取API，并会发现点击后页面马上就刷新了，没有机会让我们得到它们。

要解决这个问题有两种方式，一个是换一种抓包的软件，让我们可以拦截并选择性的发送出去，这里推荐 Burp Suite 和 Fiddle，这两个是分析 HTTP 的利器，有时间可以学习一下。

另外就是 Chrome 的 Network 下其实是可以设置刷新不清空请求的，一起来看下：
在这里插入图片描述

给 Preserve log 打上对勾就可以让 Chrome 持久化网络请求，这样刷新咱们也不用怕了。

Wannaer

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
浏览器调试步骤

在进行浏览器调试时，我们需要按照以下步骤进行操作。这些步骤包括确认调试环境、使用开发者工具进行调试、检查网络请求和响应、查看控制台输出、调试JavaScript代码、检查页面布局和样式等。通过这些步骤，我们可以快速定位和解决前端页面的问题，提升页面的质量和性能。
复制链接

扫一扫