Chrome 实用的开发功能
一、前言
Chrome作为开发者最受欢迎的浏览器,有着强大的功能和生态圈;因此掌握一些Chrome开发实用功能,可以大大增加开发效率、快速定位问题。Chrome控制台操作手册入口
下面整理一些实用的开发功能:
二、H5页面与PC页面切换
我们在开发H5页面或者App页面时便可将控制台切换为上图形式,还可以查看在不同屏幕尺寸下页面展示是否完整,发现展示问题时可以针对性修改。
三、修改请求网速,排查网络问题
测试人员在测试时反应,打开页面后内容显示不正确或者加载页面缓慢,白屏时间过长,让我们优化。但是我们自己本地运行时不断的刷新页面,都没有复现问题。这是因为本地运行的时候加载的是本地资源,加载的时候延迟很低。解决方案:在控制台中修改请求网速,排查问题。
四、关闭Chrome同源策略
跨域: 指的是在同一页面中请求地址的域名、协议、端口三个者与当前页面url不同便会发生跨域。
在日常开或者是面试的时候,跨域和同源策略都是一个老生常谈的问题。每次发生跨域你就可以在控制台看到熟悉的报错No 'Access-Control-Allow-Origin' header is present on the requested resource
,其实跨域都是发生在浏览器端,这是浏览器的安全策略;所以在开发阶段就可以关闭浏览器的同源策略来解决跨域。
4.1 window操作步骤:
1.新建一个chrome快捷方式,右键“属性”。
2.“快捷方式”选项卡里选择“目标”,添加 --args --disable-web-security --user-data-dir
4.2 Mac操作步骤
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --ignore-certificate-errors --user-data-dir=/Users/${此处完成用户名}/MyChromeDevUserData/
五、使用无痕模式
浏览器的无痕模式,不会缓存页面信息,标签页直接互不影响。
解决问题:
- 在浏览器器打开多个项目地址时,避免不了同时登录多个账号的需求,这样来回登录耽误了许多时间。
- 项目重新发布时,当前浏览器可能有缓存页面还未更新,无法查看实时效果。
打开无痕模式方法:
- 浏览器端使用快捷键:
ctrl + shift + n
- 点击浏览器右上角
三个点
选择打开新的无痕窗口
六、log和network日志保留
项目部署到线上时,监听到页面出现报错时会重新刷新页面,这时控制台打印的信息与网络请求会默认刷新,无法定位到出问题的报错信息。这个时候我们可以在控制台设置log和network日志保留
,这样页面刷新时也会报了打印信息和网络请求。
备注:更多控制台操作手册用法