青训营

用户4738855737073
30 阅读5分钟

在我们做开发的时候Bug是不避免的,虽然Bug多但是我们可以不断Debug来改写代码。前端的特点是:多平台的,有浏览器、Hybrid、NodeJs、小程序、桌面应用等。多环境:本地开发环境、线上环境。多工具:Chrom devTools、Charles、Spy-Debugger、Whistle、vConsole... 多技巧:Console、BreakPoint、sourceMap、代理等。现在下面是点击浏览器检查打开的效果图。

image.png

Elements可以查看页面的代码。我们可以在Styles这里动态地勾选或者去取消类名来查看类名生效效果。我们还可以点击具体的样式值(字号、颜色、宽度、高度)可以进行编辑,浏览器内容区域实时预览。 另外呢Computed下点击样式里的箭头也可以跳转到styles面板中的css规则。

image.png

对于console界面来说:这是对于前端而言是来展示日志的页面,我们可以打印出代码的日志。有如下几种方法:console.log() console.warn() console.error() console.debug() console.info () 值得一提的是还有console.table可以具象化展示JSON和数组数据。

50fe502cae9a8ca9491b650a47df718.jpg

还有一种是console.dir它能够通过类似文件树的方式展示对象的属性。通过console可以让我们极其方便的来检查。

对于source界面来说:

image.png

我们可以看到源代码,另外呢还有一些其它的功能！！

26e058c482f24ceab88166f8c655a53.jpg

其实最主要的是Debug栏可以帮助我们进行断点调试。断点调试环节我认为是极其重要的一环。我们经常会遇到各种各样的错误,有时候甚至会拿不到后端返回来的数据。这时候端点调试就派出场了！！首先我们可以使用debugger或者代码预览区域的行号可以设置断点。然后执行到断点处时候代码暂停执行,然后再展开Breakpoints列表可以查看断点列表,勾选/取消可以激活/禁止对应的断点。再之后就是暂停状态下,鼠标hover变量可以查看变量的值。最终在调试器Watch右侧点击+可以添加对变量的监控,查看该变量的值。

接下来看看NetWork

image.png

我们从这个列表可以看出整个这个站点在请求时候的各种各样的资源我们就以接口请求为例子,可以从接口请求查看数据对应的返回结果可以。查看js、css...... 还有一个注意的是当我们和后端开发功能的时候,可能会出现问题,这时候就需要定位了,来查看是后端还是前端的问题,我们可以在NetWork中点击接口查看Preview属性看看返回来的结果是否符合预期,从而判断后端是否正确的返回了数据。 对于Application界面来说:它有Mainifest、Service Workers、Cache、Cookies、Local Storage

Session Storage、IndexedDB、Web SQL、App Cache、下面我就来一一介绍吧！！

1.Manifest 用途：查看和调试 Web 应用程序的 Web App Manifest 文件。 功能：显示应用的图标、名称、启动 URL 等信息。 2.Service Workers 用途：管理和调试 Service Worker。 功能： 查看已注册的 Service Worker。 更新、卸载或强制更新 Service Worker。 查看 Service Worker 的生命周期状态。 查看 Service Worker 的缓存数据。  3.Cache 用途：查看和管理 Service Worker 控制的缓存。 功能： 列出所有缓存的名称。 查看每个缓存中的资源。 删除缓存中的特定资源或整个缓存。

4.Cookies

用途：查看和管理当前域下的 Cookie。

功能： 查看每个 Cookie 的名称、值、域名、路径、到期时间和安全属性。 编辑、添加或删除 Cookie。

5. Local Storage

用途：查看和管理本地存储（Local Storage）中的数据。

功能：

查看每个键值对。 编辑、添加或删除键值对。 6. Session Storage

用途：查看和管理会话存储（Session Storage）中的数据。

功能：

查看每个键值对。 编辑、添加或删除键值对。

7. IndexedDB

用途：查看和管理 IndexedDB 数据库。

功能：

查看数据库列表。 查看每个数据库中的对象存储。 查看对象存储中的数据记录。 编辑、添加或删除数据记录。 8. Web SQL

用途：查看和管理 Web SQL 数据库。

功能：

查看数据库列表。 查看每个数据库中的表。 查看表中的数据记录。 执行 SQL 查询。

9. App Cache

用途：查看和管理应用程序缓存（App Cache）。

功能：

查看已缓存的资源列表。 刷新缓存。 清除缓存。 10. Frames

用途：查看和管理当前页面的所有 iframe。

功能：

列出所有 iframe。 查看每个 iframe 的资源和存储数据。

使用示例

查看和管理 Local Storage

  1. 打开 Application 选项卡。
  2. 选择 Local Storage。
  3. 查看数据：在右侧面板中，可以看到当前域下的所有 Local Storage 键值对。
  4. 编辑数据：双击某个键值对，可以直接编辑其值。
  5. 添加数据：点击右上角的 + 按钮，可以添加新的键值对。
  6. 删除数据：选中某个键值对，点击右上角的垃圾桶图标，可以删除该键值对。

查看和管理 IndexedDB

  1. 打开 Application 选项卡。
  2. 选择 IndexedDB。
  3. 选择数据库：在左侧面板中，选择要查看的数据库。
  4. 查看对象存储：在右侧面板中，可以看到该数据库中的所有对象存储。
  5. 查看数据记录：选择一个对象存储，可以看到其中的数据记录。
  6. 编辑数据记录：双击某个数据记录，可以直接编辑其值。
  7. 添加数据记录：点击右上角的 + 按钮，可以添加新的数据记录。
  8. 删除数据记录：选中某个数据记录，点击右上角的垃圾桶图标，可以删除该数据记录。

对于Performance界面来讲以下是我对它的一些见解: 它是浏览器开发者工具中的一个重要选项卡，用于帮助开发者分析和优化网页的性能。通过 Performance 选项卡，可以记录和分析页面加载、渲染和脚本执行的时间线，从而找出性能瓶颈并进行优化。 好了今天的知识就到这了。

avatar
文章
阅读
粉丝