Chrome的开发者模式使用技巧

Chrome的开发者模式使用技巧

• 打开方式 option+command+J(i,c)或fn+F12
• $这是jQuery提供的元素选择器，用于快速定位页面上的HTML元素

认识按钮

• 1.箭头
  
  用于在页面选择一个元素来审查和查看它的相关信息，
  当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态
• 2.设备图标
  点击它可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，
  可以选择不同的移动终端设备，同时可以选择不同的尺寸比例
• 3.Elements 元素面板
  用来查看，修改页面上的元素，包括DOM标签，css样式查看
  可以进行修改，页面上直接生效
• 4.Console 控制台面板
  用于打印和输出相关的命令信息,以及我们常用的报错信息
• 5.Sources 资源面板
  这个页面内我们可以找到当前浏览器页面中的源文件
• 6.Network 网络面板
  可以看到所有的资源请求。（网络，图片，html,css）
• 7.Application 应用面板
  使用Application面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。
• 8.Security 安全面板
  可以告诉你这个网站的安全性，查看有效的证书等
• 9.Audits 审计面板
  可以帮你分析页面性能，有助于优化前端页面，分析后得到的报告

快速查找文件

• 查找某个文件，一般都是打开控制台，在source控制面板里面一个一个去找
• 使用命令command+ P 能快速搜寻和打开你项目的文件

调试时禁用chrome浏览器缓存

问题：Chrome默认是有缓存的, 调试的时候,可能需要每次都去获取最新的数据,怎么解决？

• 1. 设置->高级->清除浏览记录
     
• 2. com + , 或者shift + com + del
     
• 3. 隐身登陆，无痕模式 shift + com +N
     
• 4. 强制刷新 shift + com + R