简单实用Chrome 日常开发功能详解，帮助你上班摸鱼

chrome是目前开发过程中一骑绝尘的浏览器，占有绝对领导地位。其强大的功能和生态圈，让很多开发者爱不释手。但很多的开发者使用chrome还是停留在F12打开控制台查看log、检查元素或者debug打断点阶段，其实chrome的强大的功能远远超过我们的想象。本文结合实际业务开发场景，整理了一些在日常开发中可以大幅提高效率但又不容易被发掘的chrome特性。帮助大家提高日常效率，节省出更多的时间。

一、关闭同源安全模式，解决所有跨域问题

日常开发还是面试，跨域和同源策略都是一个老生常谈的问题。基本上每一个新手成长过程中都会遇到下面让人抓狂的经典报错：No 'Access-Control-Allow-Origin' header is present on the requested resource

当然根本解决问题的方式包括，需要配置请求headers头来解决、nginx反向代理、找后端解决设置一下接口访问的权限。

其实，跨域是仅仅存在浏览器端，为了安全策略而采用的一种方案。如果是仅仅是本地调试的话，我们完全可以把这个安全策略禁用掉，让所有的跨域限制都放开，可以在chrome中更加自由的翱翔！

1、windows端禁用

第一步，新建一个chrome快捷方式，右键“属性”

第二步，“快捷方式”选项卡里选择“目标”，添加  --args --disable-web-security --user-data-dir

 2、mac端

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --ignore-certificate-errors --user-data-dir=/Users/${此处完成用户名}/MyChromeDevUserData/

这样我们就可以快速解决跨域问题，完成日常开发。

二、log和network日志保留

日常开发中，会通过log和network去查看访问接口数据返回或者输出一些调试的日志。当代码中包含有window.location.href或者window.location.reload时，会导致我们的日志还没有看完的时候，页面啪没有了，所有的log日志被清空重新加载，很是头大...

我们可以用chrome的preserve log将所有的日志保留下去

控制台日志保留，勾上即可

 network日志保留，勾上即可

 三、自定义浏览器网速

日常开发中，在测试阶段 或者 项目上线运行，可能会出现某一个页面白屏时间过长，加载数据缓慢导致代码逻辑有问题。但是我们用本地打开的时候，特别快，无延迟。

很多的偶发性问题，往往和特定的机型、特定的网络环境等外环境造成我们的项目可能会出现一些异步加载的问题。有时客户的网络环境特别慢，但是我们开发的环境是有较高的网络配置的，所以复现不了客户的问题。

那么我们怎么样营造一个类似的环境，复现当时的场景呢。chrome提供了这个功能。

日常开发默认是无限制的

 可以设置的值，高速3G、低速3G、离线，也可以在自定义为几kb/s

 利用这个功能我们就能复现并且定位一些特定的环境，所产生的问题，更好的实现项目优化，和客户体验。

本次分享完毕~