Chrome F12开发者工具 DevTools源代码(Source)说明

摘要:DevTools,即 Chrome 开发者工具,Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。

DevTools,即 Chrome 开发者工具,Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。

源代码(Source)

    其主要功能如下介绍

    Chrome F12开发者工具 DevTools源代码(Source)说明

    Chrome F12开发者工具 DevTools源代码(Source)说明

  • 查看文件:在源代码(Source)页面可以查看到当前网页的所有源文件,在左侧栏中可以看到源文件以树状结构进行展示。
  • Chrome F12开发者工具 DevTools源代码(Source)说明

  • 点击更多选项︙,这里有两个功能选项,Group by folder(按文件夹分组)和 Open File(打开文件)。
  • 点击左下角的 Coverage(覆盖),会以折叠抽屉形式打开 Coverage(覆盖)面板。
  • 优质打印会在新选项卡中格式化文件,也可以单击底部状态栏上的 { } 按钮来进行格式化,如下图。
  • 添加断点:在源代码左边有行号,点击对应行的行号,可以给该行添加上一个断点(再次点击可删除断点)。右键点击断点,在弹出的菜单中选择 Edit breakpoint(编辑断点)可以给该断点添加中断条件。
  • Chrome F12开发者工具 DevTools源代码(Source)说明

  • 永不在此处暂停:右健点击对应行的行号,在弹出的菜单中选择 Never pause here(再次点击可取消)。
  • Chrome F12开发者工具 DevTools源代码(Source)说明

  • 中断调试:添加断点后,当 JS 代码运行到断点时会中断(对于添加了中断条件的断点在符合条件时中断),此时可以将光标放在变量上查看变量。也可在右边的侧栏上查看:
  • Chrome F12开发者工具 DevTools源代码(Source)说明

  • 在右侧变量上方,有继续运行、单步跳过等按钮,可以在当前断点后,逐行运行代码,或者直接让其继续运行。
  • Chrome F12开发者工具 DevTools源代码(Source)说明

  • 点击 Page(页面)旁边的 》,有个 Snippets(片段)标签,在里面可以添加一些常用的代码片段(可以当个小笔记本),点击 Run(运行)或右下角的 ▶ Ctrl+Enter 按钮或 Ctrl+Enter 回车,可在控制台中运行代码片段。
  • Chrome F12开发者工具 DevTools源代码(Source)说明

分节内容

版权声明:本文为博主原创文章,未经博主允许不得转载。http://www.dedenotes.com/html/devtools-source.html
(1)
打赏 微信扫一扫 微信 支付宝 QQ 扫码打赏

meta

Dedenotes 赞(3)

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

HTTP消息结构 HTTP请求报文和响应报文的格式

Dedenotes 赞(3)

HTTP 协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等),所有的 WWW(World Wide Web)文件都必须遵守这个标准。

防止表单重复提交的 4 种方法

Dedenotes 赞(3)

平时开发的项目中可能会出现下面这些情况:由于用户误操作,多次点击表单提交按钮;由于网速等原因造成页面卡顿,用户重复刷新提交页面;黑客或恶意用户使用 Postman 等工具重复恶意提交表单(攻击网站)。