目录
一、目的
之前学习了HTTP协议、HTML、JavaScript，掌握了基本的前端知识，为了更好的分析及调试前端，就需要使用开发者工具进行调试，如JS解密、XSS绕过等等。
Chrome 开发工具，是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置 JavaScript 断点并可深入理解代码的最优化策略，可用来对网站进行迭代、调试和分析。
二、Chrome 开发者工具介绍
打开-开发者工具
使用快捷键Ctrl+Shift+I打开谷歌开发者工具，如图所示，这就是开发者工具。这里我设置了主题，所以背景颜色是黑色，默认配置应该是白色。可看到该工具主要由八大面板组成，下面就介绍这八大面板的作用：
Elements/元素面板
该面板可以对网站进行元素的修改操作，如修改网站的HTML元素、CSS元素、JS元素等。
一般，我们使用该面板进行如：开发者对代码进行了屏蔽，使用该面板去掉注释恢复代码、开发者对表单进行了限制或隐藏，使用该面板进行修改去掉限制及隐藏等操作。
还有个重要的功能就是，可以点击该面板旁边的移动设备按钮，即可对网站使用移动设备界面进行浏览。
Console/控制台面板
使用控制台面板可以使用shell方式对JS进行交互，也可以使用JS语句直接更改页面。
可以使用该面板练习JS语法。
Sources/源代码面板
在源代码面板中可以设置断点来调试JavaScript代码，通常用于分析加密算法、混淆的代码、查看网站的调用元素等。
Network/网络面板
网络面板一般用于请求和下载的资源文件，进行数据包的分析。
Performance/性能面板
性能面板可以通过记录和查看网站生命周期内发送的各种事件来提高页面运行时性能。
Memory/内存面板
比性能面板提供更多的信息，如跟踪内存泄露等。
Application/应用面板
使用应用面板检查加载的所有资源，包括WEB SQL数据库，本地会话存储、Cookie、图像、样式表等。
Security/安全面板
使用安全面板调试混合内容问题，证书问题等等
三、Chrome开发者工具使用案例
1、模拟移动设备浏览
使用 Chrome DevTools 的 Device Mode 功能可构造移动设备自适应式网站。
打开 Device Mode，刷新下网站，可看到使用了相应的移动设备端进行浏览。
您可以针对各种设备测试网站，以及是否能够实现完全自适应。它包括以下两个模式：
自适应：使视口可以通过任意一侧的大手柄随意调整大小。
特定设备：将视口锁定为特定设备确切的视口大小，并模拟特定设备特性。
如果没有你需要的特定设备，点击【Edit】也可自己添加设置。
2、模拟网络连接：
利用网络调节，您可以在不同的网络连接（包括 Edge、3G，甚至离线）下测试网站。这样可以限制出现最大的下载和上传吞吐量（数据传输速率）。延迟时间操控会强制连接往返时间 (RTT) 出现最小延迟。
可以通过 Network 面板开启网络调节。从下拉菜单中选择要应用网络节流和延迟时间操控的连接。
启用节流后，面板指示器会显示一个警告图标，在您位于其他面板时提醒您已启用节流。
也可以自己设置网速进行测试。
3、模拟定位：
要访问 Chrome DevTools 传感器控件，请执行以下操作：打开 DevTools 主菜单，在 More Tools 菜单下，点击 Sensors，与桌面设备不同，移动设备通常使用 GPS 硬件检测位置。在 Sensors 窗格中，您可以模拟地理定位坐标。
g
更多例子请参考谷歌官方教程：
https://developers.google.com/web/tools/chrome-devtools/
当然，火狐浏览器也有自己的开发者工具，而且是中文哦！但功能相比较谷歌浏览器略不足。
4587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
