前端必备,50 个 Chrome Developer Tools 必备技巧

706 阅读3分钟

课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧。

这些知识是你成为合格的前端开发人员必备技能。

课程分集标题

#001 - 调试窗口的切换

#002 - 快速切换 PC 与手机端进行测试

#003 - 页面元素的快速调试技巧

#004 - 如何保持元素的 hover 等状态

#005 - 元素状态改变的监控方法

#006 - 样式快速调试与修改

#007 - 调试元素的 hover 等样式

#008 - 查看元素样式的盒装模型

#009 - 查看元素最终的样式

#010 - 元素的事件监听查看

#011 - console 的好用处

#012 - console 的一些常用设置

#013 - 如何查看被压缩的 JS/CSS 源码

#014 - 查看整站的加载资源以及编辑

#015 - 调试 JavaScript 的 Call Stack

#016 - 编辑源文件并同步到本地文件中

#017 - 网络请求的监控

#018 - 网络请求面板的按钮使用说明

#019 - 监控页面重绘的方法

#020 - 如何监控并统计没有使用到的脚本

#021 - 如何监控页面的动画变更

#022 - 网络条件与 User-Agent 的设置

#023 - 快速以编辑状态查看一个站点加载的所有资源

#024 - 调试 Android 设备的方法

#025 - 如何让浏览器阻止请求某些资源

#026 - 如何对站点下所有的资源进行全部搜索

#027 - 如何在浏览器中模拟一些传感器数据

#028 - 性能分析的方法(一)

#029 - 性能分析的方法(二)

#030 - 性能分析的方法(三)

#031 - 内存监控的原理与方法(一)

#032 - 内存监控的原理与方法(二)

#033 - 内存监控的原理与方法(三)

#034 - 什么是 manifest

#035 - 如何参看站点的 manifest

#036 - 站点 Service Workers 的概念以及查看方法(一)

#037 - 站点 Service Workers 的概念以及查看方法(二)

#038 - 快速清空所有的本地存储资源

#039 - Local Storage 的原理与查看

#040 - Session Storage 的原理与查看

#041 - IndexedDB 的原理与查看

#042 - Web SQL 的原理与查看

#043 - Cookie 的原理与查看

#044 - Cache 的原理与查看

#045 - 快速转存站点资源的一个方法

#046 - Security 节点功能讲解

#047 - Audit 的使用详解(一)

#048 - Audit 的使用详解(二)

#049 - Audit 的使用详解(三)

#050 - 全局设置功能点介绍与备忘

视频教程地址

后续课程将第一时间在 DevOpenClub Pro 交流群中更新超清视频的百度云分享。

课程地址:devopen.club/course/chro…