Chrome 实用的开发功能

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/

五、使用无痕模式

浏览器的无痕模式，不会缓存页面信息，标签页直接互不影响。

解决问题：

1. 在浏览器器打开多个项目地址时，避免不了同时登录多个账号的需求，这样来回登录耽误了许多时间。
2. 项目重新发布时，当前浏览器可能有缓存页面还未更新，无法查看实时效果。

打开无痕模式方法：

1. 浏览器端使用快捷键：ctrl + shift + n
2. 点击浏览器右上角三个点选择打开新的无痕窗口

六、log和network日志保留

项目部署到线上时，监听到页面出现报错时会重新刷新页面，这时控制台打印的信息与网络请求会默认刷新，无法定位到出问题的报错信息。这个时候我们可以在控制台设置log和network日志保留，这样页面刷新时也会报了打印信息和网络请求。

备注：更多控制台操作手册用法