前端大小屏幕分辨率调试问题——利用火狐或谷歌

在以前我开发的时候一开始用的小屏幕,后来发现在大屏幕上的布局全乱了,就换了个大屏幕。
您猜怎么着,大屏幕上写的放小屏幕上轮播图等等样式会有部分不显示或者错乱。
后来我就忙碌于大小屏幕来回调试——往事不堪回首。。。

如今,我偶然发现Firefox浏览器 Chrome浏览器都具有一个很强的功能,它可以使用开发工具切换分辨率。

接下来我来介绍使用方法。

  • 首先,将你的页面用火狐或谷歌浏览器打开。
    谷歌调试界面

注意箭头指的地方,那个带个手机图标的小按钮就是切换进切换分辨率界面的按钮,点一下进去。

  • 可以看到界面顶部从左到右有四个按钮,第一个是切换手机品牌的,这样可以快速调整兼容性,第二个和第三个就是调整宽高的,我大屏1920*900,那可以输入1366*768来看看在小屏上我的界面是什么样子。
    切换分辨率

介绍完毕~

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要使用Firefox Developer Edition调试火狐浏览器插件并观察其运行情况,请按照以下步骤操作: 1. 下载和安装Firefox Developer Edition浏览器,并启动。 2. 在Firefox Developer Edition浏览器中打开要调试的插件。 3. 在Firefox Developer Edition浏览器中,打开“Developer Tools”面板。这可以通过点击菜单栏中的“菜单”按钮,然后选择“Web开发”>“开发工具”来实现。或者,您也可以使用快捷键“Ctrl + Shift + I”(Windows和Linux)或“Cmd + Option + I”(Mac)来打开开发工具。 4. 在“Developer Tools”面板中,点击“Debugger”选项卡。在这里,您将看到一些调试工具,比如断点、变量观察器、调用堆栈等。 5. 在“Debugger”选项卡中,可以使用“Source Mapping”功能将插件代码映射到实际的源代码文件。这可以让您更方便地在插件代码中设置断点,并将调试器与浏览器中运行的实际代码联系起来。 6.设置断点: 单击文件名右侧的行号,就能够在该行设置断点。 7. 调试插件   设置好断点之后,在插件所在的web页面可以手动触发插件的事件。触发事件后可以调试插件了。 8. 在调试过程中,您可以使用断点和其他调试工具来查看插件的代码。此外,还可以使用控制台来查看已定义变量的值、执行代码等。 最后,如果您想获取更详细的关于Firefox Developer Edition的调试插件的信息,请参考官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值