移动Web开发入门(四) -- 移动端调试

最新推荐文章于 2024-05-09 16:38:04 发布
最新推荐文章于 2024-05-09 16:38:04 发布
阅读量645 收藏 2
点赞数 1
分类专栏： 移动web开发 文章标签： 移动web开发 浏览器模拟器 移动端调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47901007/article/details/119966696
版权
文章目录移动端调试浏览器调试进入控制台进入浏览器模拟器调试切换测试机型添加测试机型改变屏幕尺寸，改变DPR改变网络情况改变屏幕显示大小横/竖屏切换真机测试扩展远程调试工具 -- vorlon.js多终端调试工具 -- browsersync移动端调试移动端调试可以查看页面效果是否符合预期，不符合进行修改。浏览器调试以CSDN首页为例；进入控制台首先按Ctrl + Shift + I（或点击鼠标右键选择检查菜单项）进入控制台：进入浏览器模拟器调试按Ctrl + Shift + M（或点击
摘要由CSDN通过智能技术生成

文章目录

移动端调试

移动端调试可以查看页面效果是否符合预期，不符合进行修改。

浏览器调试

以CSDN首页为例；

进入控制台

首先按Ctrl + Shift + I（或点击鼠标右键选择检查菜单项）进入控制台：

在这里插入图片描述

进入浏览器模拟器

按Ctrl + Shift + M（或点击图中标记的图标）进入移动端调试；
在这里插入图片描述

切换测试机型

点击图中标记的图标，显示测试机型列表，可以切换测试机型；
在这里插入图片描述

添加测试机型

点击列表最后一项Edit，可添加测试机型；

最低0.47元/天 解锁文章
爱划水de鲸鱼哥～
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
移动端浏览器调试方法汇总
chunliti8112的博客
06-12 1005
Blog 原文地址 浏览器兼容性一直以来都是让 Web 前端开发人员头疼的问题。虽然移动端其内核趋于统一（Webkit），兼容问题也不再像 PC 端那么严重。但在生产环境当中，考虑到第三方浏览器在内核上面的 “优化”，如（Wechat、UC、QQ、360 等），兼容问题依旧是无法忽略。 本文汇...
【适配】425- 彻底搞懂移动Web开发中的viewport与跨屏适配
pingan8787
11-29 1395
本文字数：6912字预计阅读时间：30分钟1导读viewport是移动端跨屏适配的基石，吃透这一概念，任何复杂多变的适配需求，都可以手到擒来。移动端开发中，有一个躲避不掉的HTML ...
前端新手——适配不同手机端页面的方案，动态查询dpr设置根元素font-size
W_l_l的博客
07-22 1万+
动态计算dpr 和根元素的fontsize，适配不同分辨率不同设备的移动前端开发
Web 移动端自动化测试主流框架都有哪些？
最新发布
测试界的彭于晏的博客
05-09 993
Web移动端自动化测试成为了现代软件开发流程中的重要环节，因此，很多主流框架被开发出来来帮助开发人员提高测试效率。本篇文章将从零到一详细介绍Web移动端自动化测试的主流框架。
css设置元素的宽高为整数，为什么有的浏览器解析出来的宽高是小数？
Dontla的博客
03-18 1749
如图：因为把当前的标签页缩放显示了，所以浏览器会渲染出非整数的盒子尺寸。
CSS进阶之移动端适配 (四)：媒体查询、CSS常见单位、深入理解pixel、DPR、PPI、浏览器视口Viewport、移动端适配rem方案、移动端适配vw方案
Good Good Study,Day Day Up!
06-06 9109
是一种提供给开发者针对不同设备需求进行定制化开发的一个接口。可以让我们根据设备的类型（比如：屏幕设备、打印机设备）或者特定的特性（比如屏幕的宽度）来修改页面@media@importurlmedia属性, , 和其他HTML元素指定特定的媒体类型。
15-移动端布局基础——DPI、PPI、物理像素、DPR、viewportcss像素、DPR
CapejasmineY的博客
08-06 1016
移动端布局基础——DPI、PPI、物理像素、css像素、DPR、viewport、DPR
手机版Chrome调试方法
热门推荐
PaPablame的博客
09-30 2万+
手机版Chrome调试方法
如何在PC上查看一个web页面在移动端的展示效果
close_marty的专栏
08-25 8948
最近在chrome上发现一个东东 emulation， 这个
H5移动端调试方案全解（iOS&Android&Chrome&vConsole）
m0_48176238的博客
08-30 8784
前言 在移动端盛行的今天，大家在日常中经常会接触到H5的移动端网页，不仅仅是在浏览器中，在各种的APP中也有存在着许多的H5页面，所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求，本文旨在一文带领大家了解iOS、Android等平台的调试以及模拟器和真机的调试方法。 谷歌浏览器手机模式调试 优点：方便，常用 确定：无法完全模拟真机，无法发现真机上的一些问题 调...
干货！移动端真机调试指南，对调试说easy
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-14 371
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群前言这么快就年终了，回顾2021年发现没干啥事，换了个城市，换了份工作，新公司新坑，现在主做Hybrid APP，那...
分享移动端真机调试几种方法(更新中)
Ctrus的博客
11-21 5550
移动端真机调试方法WIN系统下安卓浏览器场景webview 场景（X5内核类）IOSMAC安卓IOS通用JS 注入类VconsoleErudaweinre 移动端前端开发经常会遇到在模拟器下没问题。一到真机就会各种问题，比如说微信内部调试h5。真机调试没有像PC 端一样方便，需要借助各种工具来实现，下面就列举下，我在项目中常用的一些调试方法。 WIN系统下 安卓 安卓需要在 开启开发者模式。国内各种定制系统的开启方法不一致。具体的请使用google 或者 baidu 查询。 以原生android11 系统为
前端必备技巧——抓包、调试
home of 倒不了的dota
07-05 1130
方式一：在页面元素上右键点击，选择检查方式二：使用快捷键⌘Opti。
移动端调试技巧与工具：构建无缝的开发体验
努力是为了站在万人之中，成为别人的光
09-18 7161
介绍移动应用调试的重要性，包括常见的问题和挑战。
vue移动端真机调试方法
m0_37680500的博客
05-11 3618
最近开发手机移动端拍照、多图上传，OCR识别、连拍等功能都需要用到手机的物理硬件（定位、相机、相册、麦克风），调试就需要在真机环境中实现。真机环境调试起来就非常的不方便，例如：1、无法看到日志信息2、无法实时调试（每次都要打包到线上才可测试）下面教程提供一下移动端的调试方法，仅供学习交流。
移动端调试工具vConsole
weixin_53818172的博客
09-12 449
vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。在public文件的index.html引入，并使用，需要的时候打开不需要就注释。在main.js中引入刚刚新建的vconsole.js。安利一款好用的移动端调试工具vConsole。官网:https://alloyteam.
媒体查询-手机尺寸参考
onevol
09-17 1万+
<meta charset="UTF-8" /> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=EDGE, chrome=1"> <meta name="viewport" content="width=device-width, heigh
移动端调试方法汇总
weixin_45077178的博客
11-28 292
背景：随着移动端的不断推进，移动端的调试也成为前段开发者不得不面临的问题，在PC端的时代，我们直接打开chrome的检查元素面板，就可以解决大部分的问题了。戴氏 到了移动端，明明在电脑上模拟好的元素，明明在电脑上模拟好的元素，在手机上就会乱掉。下面我们就来聊一聊移动端调试的那些问题。让着你调试不再那么 困难。 1、浏览器模拟手机调试 1/1 如何使用？ chrome作为一款浏览器，给开发者带来的便...
前端开发6项基础知识（掌握必备）调试篇
heiioworld_的博客
04-09 581
例如，可以使用引号搜索精确匹配关键词，可以使用减号排除不想要的关键词，可以使用site指令限制搜索范围。不同的搜索引擎有不同的优势，可以根据自己的需求选择合适的搜索引擎。例如，可以查阅相关书籍、文章、视频等，也可以咨询专家或有经验的人士。例如，如果需要了解某个主题，可以先确定主题的范围和关键词。调试控制台可以用于查看和修改网页的代码，以及执行 JavaScript 代码。抓包工具可以用于查看网络请求和响应的数据，这对于调试网络问题非常有用。在互联网上，信息的真伪良莠不齐，因此需要对找到的信息进行评估。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱划水de鲸鱼哥～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值