打开开发工具

（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. php安全编程&python测试实例编写

    前言 本文首发i春秋论坛. 本篇文章主要分享一个python暴破脚本,该脚本采用optparse模块,支持自定义字典位置:用了多线程(虽然我感觉和单线程速度差不多..是我的错觉还是线程写的不对..求表 ...

  2. FFmpeg 学习(七)：FFmpeg 学习整理总结

    一.FFmpeg 播放视频的基本流程整理 播放流程: video.avi(Container) -> 打开得到 Video_Stream -> 读取Packet -> 解析到 Fra ...

  3. 微信小程序的概要

    微信小程序的概要 学习小程序要了解一下什么事小程序,小程序开发前需要做哪些准备,微信小程序开发工具的使用,小程序中的目录结构解析,视图和渲染,事件. 小程序的配置详解,小程序的生命周期与app对象的使 ...

  4. linux中修改字符编码

    一. ubuntu修改字符编码 1. 添加字符编码,例如zh_CN.UTF-8,有两种方式 方法1:locale-gen zh_CN.UTF-8   #locale-gen命令只在ubuntu中才有 ...

  5. c++多继承多态

    C++多继承多态的实现 如果一个类中存在虚函数,在声明类的对象时,编译器就会给该对象生成一个虚函数指针,该虚函数指针指向该类对应的虚函数表. 多态的实现是因为使用了一种动态绑定的机制,在编译期间不确定 ...

  6. freemarker变量自加

    [#assign i = 0][#list dateList as item][#assign i = i + 1]<li><input type="radio" ...

  7. queue源码

    queue概述 queue是一种先进先出的数据结构,允许新增元素.移除元素,queue只允许从底端加入元素,从顶端移除元素,不允许有遍历行为. queue定义 以某种既有容器作为底部结构,将其接口改变 ...

  8. Android--序列化XML数据

    前言 之前有讲过在Android下如何解析XML文件的内容,这篇博客讲讲如何把一个对象序列化为XML格式,有时候一些项目中需要传递一些XML格式的数据.而对于如何解析XML,不了解的朋友可以看看其他三 ...

  9. ZOJ Problem Set - 1730 Crazy Tea Party

    #include<cstdio> int main(){ int T,n; scanf("%d",&T); while(T--){ scanf("%d ...

  10. MongoDB简单操作（java版）

    新建maven项目,添加依赖: <dependency> <groupId>org.mongodb</groupId> <artifactId>mong ...