打开开发工具

(1)在Chrome菜单中选择 更多工具 > 开发者工具。
(2)在页面元素上右键点击,选择 “检查”。
(3)使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。

设备模式

调试代码

当您知道要审查的语句时,在特定代码行上设置断点很有用。例如,如果您的登录流程未按预期工作,并且您的代码中只有一个函数来处理登录,那么可以安全地假设该错误可能在该函数中。在这种情况下,在该函数的第一行添加断点是有意义的。

当你在一行代码上设置断点时,代码总是会在这一行代码上暂停,直到您删除断点,禁用它,或使其有条件触发。

要在特定代码行上设置断点,首先打开Sources(源文件)面板,并在左侧的File Navigator(文件导航器)窗格中选择该脚本。如果找不到File Navigator(文件导航器),按下Toggle file navigator(切换文件导航器)按钮()。

在源代码的左侧,您可以看到行号。这个区域称为line number gutter(行号槽)。单击行号槽中的行号,就会在该行代码上添加一个断点。

推荐网址:https://www.html.cn/doc/chrome-what/

Chrome 开发者工具的更多相关文章

  1. Chrome开发者工具不完全指南:(三、性能篇)

    卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于一般的网站项目来说,其实就是需 ...

  2. Chrome开发者工具不完全指南(四、性能进阶篇)

    前言 Profiles面板功能的作用主要是监控网页中各种方法执行时间和内存的变化,简单来说它就是Timeline的数字化版本.它的功能选项卡不是很多(只有三个),操作起来比较前面的几块功能版本来说简单 ...

  3. Chrome开发者工具不完全指南(五、移动篇)

    前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板.一.Audits Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大类,一类是 ...

  4. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  5. Chrome开发者工具不完全指南(六、插件篇)

    本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件.在chrome商店里面有很多插件,没事建议大家去逛逛.不过需要FQ,所以诸位请自备神器.一.皮肤插件 首先是大家期盼已久,翘首以 ...

  6. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  7. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  8. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  9. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  10. Google Chrome开发者工具

    Google Chrome开发者工具 是内嵌到浏览器的开发工具,打开方式有两种:第一“按F12”,第二:shift+ctrl+i(火狐.360等浏览器也可以这么用) Console介绍 Console ...

随机推荐

  1. 迈向高阶:优秀Android程序员必知必会的网络基础

    1.前言 网络通信一直是Android项目里比较重要的一个模块,Android开源项目上出现过很多优秀的网络框架,从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用 ...

  2. Javascript高级编程学习笔记(30)—— BOM(4)navigator对象

    window对象作为浏览器的全局对象.location对象保存了页面的url信息 那么navigator对象又有什么作用呢? navigator对象 该对象最早由 Netspace Navigator ...

  3. OAuth2.0深入理解

    1. OAuth2.0深入理解 1.1. 概念 OAuth(Open Authorization)开放授权,表示将系统功能部分授权给第三方系统调用,实现更细颗粒度的权限控制 OAuth是一种在线授权或 ...

  4. redis5.0新特性

    1. redis5.0新特性 1.1. 新的Stream类型 1.1.1. 什么是Stream数据类型 抽象数据日志 数据流 1.2. 新的Redis模块API:Timers and Cluster ...

  5. Python - 一些值得阅读的PEP

    1- PEP简介 PEP是Python增强提案(Python Enhancement Proposal)的缩写.社区通过PEP来给Python语言建言献策,每个版本的新特性和变化都是通过PEP提案经过 ...

  6. java mongodb连接配置实践——生产环境最优

    之前百度,google了很多,发现并没有介绍mongodb生产环境如何配置的文章, 当时想参考下都不行, 所以写篇文章,大家可以一块讨论下. 1. MongoClientOptions中的连接池配置: ...

  7. yum install --downloadonly 下载依赖包研究

    在CentOS中可以使用yum自动安装软件,在离线环境中却行不通. Linux localhost 3.10.0-327.el7.x86_64 #1 SMP Thu Nov 19 22:10:57 U ...

  8. 设置build.gradle打包时自动加时间

    在build.gradle中添加以下函数: def releaseTime() { return new Date().format("yyyyMMddHHmm", TimeZon ...

  9. Spring系列之IOC的原理及手动实现

    目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 导语 Spring是一个分层的JavaSE/EE full-stack(一站式) 轻量级开源框架.也是几乎所有J ...

  10. 多线程编程学习笔记——使用异步IO

    接上文 多线程编程学习笔记——使用并发集合(一) 接上文 多线程编程学习笔记——使用并发集合(二) 接上文 多线程编程学习笔记——使用并发集合(三) 假设以下场景,如果在客户端运行程序,最的事情之一是 ...