美文网首页
【Chrome】开发者工具使用

【Chrome】开发者工具使用

作者: 失语失芯不失梦 | 来源:发表于2023-03-27 14:33 被阅读0次

    预备操作:

    进入开发者模式的快捷键:F12

    Command+Shift+M (Mac) 或 Ctrl+Shift+M(Windows、Linux)可切换 Device Mode

    一、device模拟器

    从设置—Devices进入,可以看到Chrome已经内置了很多device了:

    但如果内置的也不满足我们的需求的话,可以点击Add custom device去添加我们所需要的设备:

    1、输入device name,随便自定义一个模拟器的名字就行

    2、输入手机分辨率的width、height,例如400、700(如果像素比是'2',1920*1080分辨率的手机,在这里width*height就要输入540*960 )

    3、输入device pixel ratio(设备像素比),一般是输入2,也可以不输入

    获取UA的方式:

    输入user agent string,简单的方法是打开手机某浏览器,在地址栏输入javascript:alert(navigator.userAgent),弹出user agent string,再手敲到模拟器user agent string 输入框中

    百度一下想要机型的UA是什么:https://www.cnblogs.com/zhenning-li/p/11429831.html

    国外浏览器UA可查询:http://www.useragentstring.com/pages/useragentstring.php这个网址

    二、网络情况模拟

    在这个地方可以选择内置的几种网络情况,online是当前电脑连接的WIFI,offline是无网,其他的就如字面所示。点击 Add可以添加自定义的网络情况:

    1、随便自定义网络名称

    2、下载速度:https://blog.51cto.com/ucode/1917287

    3、上传速度

    4、延迟

    参数配置参考:

    相关文章

      网友评论

          本文标题:【Chrome】开发者工具使用

          本文链接:https://www.haomeiwen.com/subject/tyrzrdtx.html