一、Chrome DevTools 简介

  • Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析
  • 手册：Chrome 开发者工具中文手册、Chrome 开发者工具官网
  • 打开Chrome开发者工具
    • 在Chrome菜单中选择：更多工具->开发者工具
    • 在页面元素右键点击，选择检查
    • 快捷键：Ctrl+shift+I（最近关闭）或Ctrl+shift+C（Elements）或 Ctrl+shift + J（console） 或 F12

二、Chrome DevTools 基本功能

1、Elements元素面板：检查和调整页面，调试Dom，调试CSS

  • 查看和选择DOM节点
  • 实时编辑HTML和DOM
    • 添加或者修改HTML属性：鼠标右键---Add attribute 、Edit attribute
    • 添加HTML标签：右键---Edit as HTML
    • 复制或者剪HTML标签：右键---Copy或者直接Ctrl + C/X 、Ctrl + V
    • 拖动HTML标签：按住鼠标左键拖到位置松开即可
  • 在Console中访问节点
  • 在Dom中断点调试

2、Network网络面板：调试请求，链接页面静态资源分布，网页性能检测

3、Console控制面板：调试JavaScript、查看日志、交互式代码调试

  • 运行JavaScript代码，交互式编程
  • 查看程序中打印的log日志
    • console.log打印信息
    • console.warn告警信息
    • console.error错误信息，通常在异常的逻辑中catch住的错误信息
    • console.table展示JSON格式的复杂信息
    • console.group和console.groupEnd信息组展示
    • console.assert断言
    • console.time和console.timeEnd计算时间
    • console custom定制样式
    • Network网络请求错误展示
  • 断点调试代码debugger
    • 传统的console.log或alert打印运行时的信息提示
    • 使用debugger调试代码，在需要调试的代码中键入debugger
    • 直接在source面板里手动打断点（条件断点、事件断点、xhr请求断点、DOM断点）

4、Sources 源代码资源面板：调试JavaScript页面源代码，进行断点调试代码

  • 右侧打开静态资源或者使用ctrl+p找出你需要的文件
  • 使用snippets来辅助调试代码

  • 使用devtools作为代码编辑器

    5、Application应用面板：查看&&调试客户端存储

  • 查看与调试cookie

  • 查看与调试localstorage与sessionstorage

6、Performacne性能面板：查看页面性能细节，细粒度对网页载入进行性能优化

7、Memory内存面板：JavaScript CPU分析器，内存堆分析器

8、Security安全面板：查看页面安全及证书问题

9、Audits面板：使用Google Lighthouse辅助性能分析。给出优化建议

10、其他

  • 模拟移动设备，进行h5页面开发

Chrome DevTools的使用的更多相关文章

  1. Chrome DevTools – 键盘和UI快捷键参考

    Chrome DevTools有几个内置的快捷键,可以节省你的日常工作的时间. 本指南提供了Chrome DevTools中每个快捷键的快速参考.虽然一些快捷方式在全局范围内可用,但其他的快捷方式用于 ...

  2. Chrome Devtools简介

    Chrome开发工具(又称DevTools),是一套内嵌在chrome浏览器内部的web编写和调试工具.DevTools提供给web开发人员深入地访问浏览器内部和web应用的机会.DevTools可以 ...

  3. Chrome DevTools good good study day day up

    Chrome DevTools 官方页面 https://developer.chrome.com/devtools

  4. 使用Chrome DevTools的Timeline分析页面性能

    随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...

  5. Chrome DevTools学习笔记

    ---恢复内容开始--- chrome和firefox的开发者工具大同小异,都非常强大.今天在博客园上看了这篇文章(http://www.cnblogs.com/Wayou/p/chrome-cons ...

  6. chrome devtools

    Elements chrome devtools 中 Elements panel 是审查 dom 元素和 css 的, 可以实时修改 dom/css. windows: ctrl + shift + ...

  7. 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能

    来源: http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles 我们都希望创建高性能的Web应 ...

  8. Chrome DevTools 调研笔记

    1  说明 此篇文章针对Chrome DevTools常用功能进行调研分析.描述了每个功能点能实现的功能.应用场景和详细操作. 2  Elements 2.1  功能 检查和实时更新页面的HTML与C ...

  9. Chrome DevTools: Export your raw Code Coverage Data

    The Code Coverage tool visually shows you which lines of code in your CSS and JavaScript are used an ...

  10. Chrome DevTools: Color tricks in the Elements Panel

    shift + click to change the color format Tip one The Colour Platters are customeised for you .they s ...

随机推荐

  1. 迁移历史sql数据

    --select * into Trade2018 from Aozzo_ODS..Trade t1 --where t1.Created<'2019-01-01' --创建索引 --creat ...

  2. LengthFieldBasedFrameDecoder 参数说明

    LengthFieldBasedFrameDecoder 参数说明 举例 数据包格式为 body长度(4个)+14个字节的版本说明(字符串)+body 那么LengthFieldBasedFrameD ...

  3. Qt Quick 常用元素：RadioButton(单选框)，CheckBox(复选框) 与 GroupBox(分组框)

    先介绍一下 ExclusiveGroup. ExclusiveGroup (互斥分组)本身是不可见元素,用于将若干个可选择元素组合在一起, 供用户选择其中的一个选项.你可以在 ExclusiveGro ...

  4. 目标检测 <二> TensorFlow安装

    一:创建TensorFlow工作环境目录 1. 在anconda安装目录下找到envs目录然后进入 2. 在当前目录下创建一个文件夹改名为tensorflow 二: 创建TensorFlow工作环境 ...

  5. Go gRPC 调试工具

    概述 最近这段时间工作挺忙的,发现已经 3 周没更文了... 感谢你们还在,今天给大家分享一款 gRPC 的调试工具. 进入正题. 当我们在写 HTTP 接口的时候,使用的是 Postman 进行接口 ...

  6. ROS源更改

    ROS源更改 配置你的电脑使其能够安装来自 packages.ros.org 的软件,使用国内或者新加坡的镜像源,这样能够大大提高安装下载速度 sudo sh -c '. /etc/lsb-relea ...

  7. C# SqlServer Ado.net参数化查询插入null数据

    DateTime? dt=null; if (dt.HasValue) { cmd.Parameters.AddWithValue("@CreateDateTime", dt); ...

  8. pod的yaml说明

    apiVersion: v1 #指定api版本,此值必须在kubectl apiversion中 kind: Pod #指定创建资源的角色/类型 metadata: #资源的元数据/属性 name: ...

  9. jQuery.form 上传文件

    今年大部分是都在完善产品,这几天遇到了一个问题,原来的flash组件不支持苹果浏览器,需要改.在网上搜了下,看到一个jQuery.form插件可以上传文件,并且兼容性很好,主要浏览器大部分都兼容,插件 ...

  10. Python - 记录我开始学习Python的时间节点

    记录我开始学习Python的时间节点 2019-09-22 从明天开始我要开始学习Python了,坚持学习.坚持写博客,慢慢积累. 结合实例项目,最好能把目前在做的项目用Python实现. 加油!