chromeIt is the best browser in the current development process, occupying an absolute leadership position. Its powerful functions and ecosystem have made many developers put it down. However, many developers chromestill stay at the stage F12of opening the console 查看logor breaking the point . In fact, the powerful functions of chrome are far 检查元素beyonddebug our imagination. Based on the actual business development scenarios, this article sorts out some chrome features that can be greatly improved in daily development 提高效率but are not easy to be discovered. Help everyone improve daily efficiency and save more time .
1. Turn off the same-origin security mode to solve all cross-domain problems
Daily development is still 面试, 跨域and 同源策略is a commonplace problem. Basically, every novice will encounter the following classic error reports that make people crazy when they grow up:No 'Access-Control-Allow-Origin' header is present on the requested resource
Of course, the way to solve the problem fundamentally includes that you need to configure the request headers to solve it , nginx 反向代理、finds后端解决设置一下接口访问的权限。
In fact, cross-domain is a solution that only exists on the browser side and is adopted for security policies. If it is only for local debugging, we can completely disable this security policy , let go of all cross-domain restrictions, and fly more freely in chrome!
1. Disabled on windows
The first step is to create a chrome shortcut, right-click "Properties"
In the second step, select "Target" in the "Shortcut" tab, add --args --disable-web-security --user-data-dir
2. mac terminal
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --ignore-certificate-errors --user-data-dir=/Users/${此处完成用户名}/MyChromeDevUserData/In this way, we can quickly solve cross-domain problems and complete daily development.
2. Log and network log retention
In daily development, log and network will be used to check the data returned by the access interface or output some debugging logs. When the code contains window.location.href or window.location.reload , it will cause our log to disappear when the page has not been read, and all logs will be cleared and reloaded, which is a big headache.. .
We can use chrome's preserve log to keep all the logs
Console log retention, tick it
The network log is reserved, just check it
3. Customize browser speed
In daily development, during the test phase or when the project is running online, a certain page may appear blank for too long, and the slow loading of data may cause code logic problems. But when we open it locally, it is very fast and there is no delay.
Many sporadic problems, often related to specific models, specific network environments and other external environments, may cause some asynchronous loading problems in our projects. Sometimes the customer's network environment is very slow, but our development environment has a relatively high network configuration, so the customer's problem cannot be reproduced.
So how do we create a similar environment and reproduce the scene at that time. Chrome provides this functionality.
Daily development is unlimited by default
The value that can be set, high-speed 3G, low-speed 3G, offline, can also be customized to a few kb/s
Using this function, we can reproduce and locate some specific environments, the problems that arise, and better realize project optimization and customer experience.
This sharing is over~