一、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. Adams宏导出

    var set var=ip integer_value=1 var set var=macro_name str="" for variable_name=the_macro o ...

  2. 解决SpringDataJpa实体类中属性顺序与数据库中生成字段顺序不一致的问题

    一.在application.yml配置中添加数据库根据实体类自动创建数据库表的配置(这里数据库采用MySQL数据库) jpa: database: MYSQL show-sql: true #Hib ...

  3. Jenkins打包编码GBK的不可映射字符

    1.错误信息如下: ​ 2.在Maven的POM中加入如下代码,然后重新打包即可. <properties> <!-- 文件拷贝时的编码 --> <project.bui ...

  4. python的深浅拷贝-成为马老师的弟子

    参考链接 骏马金龙 前提 想要了解深浅拷贝之前必须要知道可变和不可变类型,和他们的特性 不可变类型 数字 字符串 元组 不可变集合 特性:改变值,会创建新的内存空间存储数据 可变类型 列表 字典 可变 ...

  5. Docker 创建 Redis 容器

    Docker 创建 Redis 容器 # 配置文件映射: # -v /root/redis/redis.conf:/etc/redis/redis.conf # 数据目录映射: # -v /root/ ...

  6. linux下c++如何输入不回显

    #include <stdio.h> #include <termios.h> #include <unistd.h> #include <iostream& ...

  7. EF Core反向导航属性解决多对一关系

    多对一是一种很常见的关系,例如:一个班级有一个学生集合属性,同时,班级有班长.语文课代表.数学课代表等单个学生属性,如果定义2个实体类,班级SchoolClass和学生Student,那么,班级Sch ...

  8. C#左移运算符

     << 左移操作符.简单理解是对变量进行与2的n次乘方的运算.比如x<<1=x*2x<<2=x*4x<<3=x*8x<<4=x*16依此类推 ...

  9. Jquery ajax与asp.net MVC前后端各种交互

    1.Jquery通过ajaxSubmit提交表单 if (jQuery("#Edit_from").validate().form()) { jQuery("#Edit_ ...

  10. vi/vim的快捷操作(2)

    1.拷贝当前行[yy],拷贝当前行向下的5行[5yy],并粘贴[p] 2.删除当前行[dd],删除当前行向下的5行[5dd] 3.在文件中查找某个单词,命令行模式下输入[/关键字],回车查找,输入[n ...