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

article/2025/8/27 0:02:43

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

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

本次分享完毕~


http://chatgpt.dhexx.cn/article/6D0SPN7r.shtml

相关文章

小米路由器3G如何解决USB3.0 5G WiFi速度慢的问题

经常玩电脑,希望家里有个轻 nas,小米路由器是一个不错的选择,tbw买了一个小米路由器3G看重的是快速的速度(usb3.0 5G Wifi),及小米的可拓展性,使用usb3.0的usb接口,且使用5gb网速&am…

浏览器通过f12来限制网速

浏览器可以使用F12开发者工具来模拟网速的快慢。 打开需要测试的网站,点击F12,再点击选项里的network-no throttling,展示的有几种,offline,快3g,慢3g,或者自定义 点击add可以自定义网速&#…

移动网速测试软件,网速测试大师APP

网速测试大师APP是一款专业的手机网络测试应用,支持一键测速,精准快速,还能全方位分析网速,Wifi和移动网络全检测,30秒测速当前网络状况,做随时随地的测速专家。 该软件整个测速过程精准又快速,…

android 显示网速,随着掌握联网状态 Android手机如何显示实时网速

很多时候手机信号栏明明显示正在联网而且图标也显示正在下载上传中,但就是打不开网页。实际上,此时可能正处于4G→3G切换状态而出现了短暂的断网。那么,如何才能准确掌握手机当前的联网状态呢? 答案很简单,就是通过手机…

Fiddler工具的弱网模拟2G/3G/4G

日常测试工作中,C端用户会因信号和设备网络原因,出现一些恶劣网络的状态,然后出现奇奇怪怪的丢包、重传、UI空白、UI绘制异常等问题,就需要测试人员去模拟这类弱网环境去重现用户反馈的问题,以方便开发同学解决和调优加…

网速测试大师的软件怎么回事,网速测试大师

手机网速测试大师是一款手机网络测试软件,通过手机网速测试大师你可以直接测试你手机的网络速度,无论是WIFI还是手机移动网络都可以检测,让你更加了解你的手机网络。 软件介绍 网速测试大师是一款热度仅次于Ookla Speedtest. net的网速测试工…

限制浏览器网速

需求:限制浏览器网速,拉长请求时间,方便验证请求loading状态是否添加成功。 ps:一般建议给弹窗/按钮增加loading状态,防止重复点击之后多次请求 解决方案:控制台(f12)-网络(Network) No throttling 无限制…

使用chrome进行慢网速测试

前言 在开发的时候,有这么一种情况,点击一个按钮调用一个接口生成数据,之后刷新页面,但是由于网络慢的原因,能够多次点击,但是自己的网络模拟不了很慢的情况,怎么办呢? 使用chrome…

Vue Chrome浏览器手动调节模拟网速

Chrome浏览器手动调节网速 1.首先打开chrome浏览器,按下键盘上的f12键,弹出开发者调试工具 2.点击network——>No throtting弹出选择项 3.选择需要模拟的选项就行了 Fast 3G:表示快的3g网速 Slow 3G:表示慢的3g网速 Offline…

3g显卡测试软件,3G网速测试细则

3G网速测试细则 3G网速测试细则 测试机型:小米手机2、小米手机2电信版、vivo X1st 测试机型 测试软件:speedtest 爱奇艺高清影视 测试软件 测试方法: ① 在同一时间段、同一地点使用Speedtest测试三台手机3G网络条件下的速度 ② 分别使用装有…

国内三大制式3G网络简介及比较

比比谁最快 随着中国电信近期3G网络试商用的开始,越来越多的用户开始关注国内3G网络上网速度,“传说”中的3G网络速度到底有多快呢?据最新的数据显示,中国电信的试商用测试信号可以达到近200KB/s的下载速度。这是怎样的一个概念&a…

python自动化介绍

首先我们得了解一下什么是自动化测试? Python自动化就是使用python语言来编写的脚本或者平台(自动化运维平台、自动化测试平台-->devops),实现公司中重复业务的自动化流程。大体的方向分为 python自动化测试 python自动化运维 …

【Python自动化测试32】App自动化环境搭建

文章目录 一、前言二、安装与环境搭建教学2.1 环境依赖2.2 appium程序安装2.3 appium-python-client2.4 模拟器安装2.5 java jdk安装2.6 Android SDK环境 一、前言 本文章主要讲解App自动化测试的环境搭建,在App自动化测试环境搭建中,有非常多的坑&#…

Python自动化--1.Python环境安装-linux

python自动化更贴近运维自动化 Python自动化–1.Python环境安装-linux Python自动化–2.Python变量 Python自动化–3.Python数据类型 Python自动化–4. python类型转换 Python自动化–5. if判断语句 Python自动化–6. 写一个python程序 Python自动化–7. 函数的定义和调…

30道python自动化测试面试题

文章目录 1、什么项目适合做自动化测试?2、什么是 PO 模式?3、PO 模式的封装原则有哪些?4、 Python 中 *args 和 **kwargs 的作用?5、Python 中的垃圾回收机制是什么?6、selenium中隐藏元素如何定位?7、关闭…

python自动化测试-最常用的自动化测试框架

在开始学习python自动化测试之前,先了解目前市场上的自动化测试框架有哪些? 随着技术的不断迭代更新,优胜劣汰也同样发展下来。从一开始工具型自动化,到现在的框架型;从一开始的能用,到现在的不仅能用&…

Python自动化测试框架有哪些?

常用的Python自动化测试框架有Robot Framework、Pytest、UnitTest/PyUnit、Behave、Lettuce。 软件测试的自动化在预设条件下运行系统或应用程序,评估运行结果,预先条件应包括正常条件和异常条件。自动化测试以人为驱动的测试行为转化为机器执行的一种过…

python自动化爬虫实战

python自动化爬虫实战 偶然的一次机会再次用到爬虫,借此机会记录一下爬虫的学习经历,方便后续复用。 需求:爬取网站数据并存入的csv文件中,总体分为两步 爬取网站数据存到到csv文件中 1、配置爬虫环境 1.1、下载自动化测试驱动 …

Python自动化神器-Playwright

1、Playwright介绍 Playwright是一个强大的Python库,仅用一个API即可自动执行Chromium、Firefox、WebKit等主流浏览器自动化操作,并同时支持以无头模式、有头模式运行。Playwright提供的自动化技术是绿色的、功能强大、可靠且快速,支持Linux…

python自动化测试绕过手机验证码

自动化测试登录需使用手机验证码,但是测试水平太弱只能让开发写死验证码??? 不服气就试试别的方法,这里提供两种解决思路: 1.从服务器日志中获取 此种方法尤其适合生产数据库不开放给测试的公司&#xff…