Chrome开发者工具使用

Chrome开发者工具使用

1. Elements （元素）允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果。
2. Console（控制台）显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
3. Sources（资源面板）主要用来调试js。
4. Network（网络）可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等。
5. Performance（性能）提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间。
6. Memory（内存）分析web应用或者页面的执行时间以及内存使用情况。
7. Application（投入）该面板主要是记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
8. Security（安全）通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。
9. Audits（审计）分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。