前端开发神一样的工具chrome调试技巧
前端开发神一样的工具chrome调试技巧
文章来自 Colin-UED // 与您分享前端开发知识
Chrome浏览器不仅可以调试页面、JS、请求、资源、cookie，还可以模拟手机进行调试。自从使用了Chrome，我就离不开它了。
下面整理一下如何使用Chrome进行调试。
怎样打开Chrome的开发者工具？
直接在页面上点击右键，然后选择审查元素：
或者在Chrome的工具中找到：
或者，你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。
打开的开发者工具就长下面的样子：
不过我一般习惯与点右上角的那个按钮，将开发者工具弹出作为一个独立的窗口：
Elements标签页
Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。
- Edit as HTML直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。
- Copy可以将HTML代码直接复制下来，在拷贝别人网站上面的HTML代码的时候灰常方便，你懂的~~
- Delete node删掉一个HTML Node
- Break on可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处
Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：
- Style看HTML元素的样式
- Computed可以看元素的盒子模型
- Properties看到元素具有的方法与属性，比查API手册要方便得多
Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。
点击左侧某一个具体请求URL，可以看到该请求的详细HTTP请求情况：
我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。
- Headers请求头信息和响应头信息
- Preview预览结果，如果是文件可以查看这个文件；如果是图片可以预览这个图片；如果是从服务器返回来的JSON数据，可以查看格式话后的JSON
- Response从服务器返回的响应结果
- Cookies请求和响应的Cookie
- Timing具体的响应时间
Resources标签页
Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况，这个Timeline指的JS执行时间、页面元素渲染时间（每个信息都怎么看，我没弄懂..）
Profiles标签页
主要是做性能优化的，包括查看CPU执行时间与内存占用（这个也没弄懂）
Audits标签页
这个对于优化前端页面、加速网页加载速度很有用哦（相当与Yslow）
点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了
Console标签页
就是Javascript控制台了：
在这个面板可以查看错误信息、打印调试信息（console.log()）、写一些测试脚本，还可以当作Javascript API查看用。
移动端开发调试
现在新版chrome弹出控制台后如下图，其中的工具对移动端调试非常方便。
在控制台中可以直接模拟手机、调整UA、修改网络连接状态
前端开发神一样的工具chrome调试技巧的更多相关文章
- 前端进阶（8） - 前端开发需要了解的工具集合：webpack, eslint, prettier, ...
前端开发需要了解的工具集合:webpack, eslint, prettier, ... 前端开发需要了解的一些工具,这些工具能够帮助你在项目开发中事半功倍. 1. nrm: npm registry ...
- Chrome 调试技巧
Chrome 调试技巧 1.alert 这个不用多说了,不言自明. 可参考:https://www.cnblogs.com/Michelle20180227/p/9110028.html 2.cons ...
- 前端开发神器之chrome 综述
作为前端工程师,也许你对chrome开发工具不陌生,但也谈不上对各个模块有深入了解. 本文主要是为chrome开发工具使用这个系列做个开篇. 参考资料: 谷歌开发者: https://develope ...
- 4. web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- web前端开发分享-css,js工具篇
web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...
- chrome调试技巧和插件介绍
14 个你可能不知道的 JavaScript 调试技巧 五种前端开发必备的调试技术 日志的艺术 吐血推荐珍藏的Chrome插件 吐血推荐珍藏的 Chrome 插件(二)
- Chrome 开发工具 Javascript 调试技巧
http://www.w3cplus.com/tools/dev-tips.html 一.Sources 面板介绍: Sources 面板分为左中右 3 部分左:Sources 当前页面加载的资源列表 ...
- 前端开发：这10个Chrome扩展你不得不知
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/10-top-chrome-extensions-f ...
- 二十四、【开源】EFW框架Winform前端开发之项目结构说明和调试方法
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
随机推荐
- Linux Shell脚本编程while语句
Linux Shell脚本编程while语句案例 1,每隔3秒,打印一次系统负载 #!/bin/bash while truedo uptime sleep 3done 2,把监控结果保存 ...
- Nginx基础知识介绍
Nginx基础知识介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx概述 Nginx是免费的.开源的.高性能的HTTP和正向/反向代理服务器.邮件代理服务器.以及T ...
- SpringBoot 自定义线程池，多线程
原文:https://www.jianshu.com/p/832f2b162450 我们都知道spring只是为我们简单的处理线程池,每次用到线程总会new 一个新的线程,效率不高,所以我们需要自定义 ...
- 一天撸完《 Learning Jupyter 5 2nd Edition》
因为工作需要了解这个应用的大概功能. 网上找不到下载的,CSDN没积分. 最后,在道客上找到了这个PDF.花了一天时间浏览了一下, 只留意了python功能,其它语言略去. widget和jupyte ...
- __attribute__((weak))
情况是这样的,碰到一个棘手的问题:我们不确定外部模块是否提供一个函数func,但是我们不得不用这个函数,即自己模块的代码必须用到func函数: extern int func(void); ..... ...
- 【Linux】文件拷贝-Linux当前目录所有文件移动到上一级目录（转）
Linux当前目录所有文件移动到上一级目录 mv * ../
- Python学习进阶之薄弱点总结
''' 1.实现用户传入一个普通字符串, 返回字符串的md5加密结果的函数 ''' # import hashlib # # def M(str): # m = hashlib.md5() # m.u ...
- js日志组件封装
js日志组件~~ 1 function Logger(level) { if (!(this instanceof Logger)) { return new Logger(); } var ERRO ...
- Chrome插件中 popup,background,contentscript消息传递机制
https://blog.csdn.net/summerxiachen/article/details/78698878 popup不能接收到contentscript 发送的消息, 如果这时cont ...
- BST | 1064 完全二叉搜索树
OJ:https://www.patest.cn/contests/pat-a-practise/1064 (一)23分(3个case未过)代码 建树的规律是我瞎猜的.首先用样例数据分析. 对数据排序 ...