程序员经验分享-hwhale

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

2023-11-18

移动端调试

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

浏览器调试

以CSDN首页为例；

进入控制台

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

在这里插入图片描述

进入浏览器模拟器

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

切换测试机型

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

添加测试机型

点击列表最后一项Edit，可添加测试机型；
在这里插入图片描述

改变屏幕尺寸，改变DPR

点击列表第一项Responsive，可拖动改变屏幕尺寸，点击DPR，可改变DPR；
在这里插入图片描述

改变网络情况

在这里插入图片描述

改变屏幕显示大小

在这里插入图片描述

横/竖屏切换

在这里插入图片描述

真机测试

将手机和电脑置于同一局域网下，手机使用浏览器访问编译器返回的地址。

也可以使用其他工具（phpstudy等）搭建服务器，或者远程服务器的地址。

在这里插入图片描述
浏览器模拟器测试和真机测试之间有一定差异，将不符合预期的功能进一步进行调整。

扩展

远程调试工具 – vorlon.js

Vorlon.JS是为JavaScript所设计的远程调试测试工具（需要node环境）。它可以在移动设备上加载调试JavaScript代码。

使用时Vorlon.JS客户端仅需添加一个script标签。

在这里插入图片描述

多终端调试工具 – browsersync

Browsersync省时的浏览器同步测试工具（需要node环境），能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

移动web开发

浏览器模拟器

移动端调试

移动Web开发入门(四) -- 移动端调试 的相关文章

随机推荐

  • 崇德科技深交所上市：上半年营收2.6亿募资10亿 市值48亿

    雷递网 雷建平 9月20日 湖南崇德科技股份有限公司 简称 崇德科技 证券代码 301548 今日在深交所创业板上市 崇德科技本次发行1500万股 发行价66 8元 募资10亿元 崇德科技原计划募资5 3亿元 这意味着超募了近5亿元 崇德科

  • K9s之Kubernetes集群管理交互工具实践

    文章目录 0x01 基础简介 0x02 安装实践 安装流程 配置示例 0x02 命令实践 命令参数 简单使用 0x01 基础简介 K9s Kubernetes CLI To Manage Your Clusters In Style 描述

  • 快速排序 详解（快速排序 双路快排 三路快排）

    注 内容 图片来自于慕课网liuyubobobo老师的课程 官方代码链接 https github com liuyubobobo Play with Algorithms 快速排序 快速排序可以说是20世纪最伟大的算法之一了 相信都有所耳

  • Stm32 一键下载电路详解

    文章目录 前言 一键下载 一键下载原理 硬件原理图 跳帽与启动 存储映射 串口下载程序由来 一键下载流程 通过 USB 控制机器复位握手 解读 前言 最近在又要折腾 stm32 了 所以翻出了角落里的开发板 先复习下怎么一键下载来着 一键下

  • linux中安装mysql时报错解决方案

    转载于http www cnblogs com xiaolang8762400 p 6950920 html 找了很久才找到 谢谢大神 本人需要找的问题主要是安装时出错的解决方法 本人的文件版本跟原创的版本有点不一样 需要哪个版本自行选择

  • 实战：从Mysql数据库frm文件中，提取表结构创建SQL语句

    需求 在某些特殊的场景下 例如你的mysql数据库无法启动 需要你将表的ibd文件拷贝到另一个数据库中 恢复业务数据库 恢复业务数据的前提 是你需要在另一个数据库中 创建好一模一样的表结构 这时你就需要从Mysql数据库的frm文件中 提取

  • Mysql查询日期timestamp格式的数据

    在Navicat中 时间戳 timestamp 格式的数据表现为 查询某一天的数据 SELECT FROM my table WHERE update time LIKE 2022 10 06 或是 SELECT FROM my table

  • 如何成功开展网络营销?

    企业如要将网上营销开展成功 则必须注意以下方面 1 准确 客观的市场定位 网上营销同传统的营销相比 其前期工作也包括准确客观的市场定位 网上营销与一般营销有较大的区别 因此其市场定位也有其独特的特点 如何准确客观地进行网上营销的市场定位 必

  • CentOS8更换阿里源及解决yum update报错问题

    CentOS更换阿里源 yum makecache提示错误 为 repo base 下载元数据失败 Cannot download repomd xml Cannot download repodata repomd xml All mir

  • GitHub的使用

    文章目录 一 通过实际操作学习Git 1 Git基本操作 2 分支操作 3 更改提交操作 4 推送至远程仓库 5 从远程仓库获取 6 帮助大家深入理解Git资料 二 工具栏 1 键盘快捷键 2 工具栏 3 控制面板 4 仓库 三 与GitH

  • vite插件介绍 - vite-plugin-meta-env

    vite插件介绍 vite plugin meta env a vite plugin define dynamic env variables in import meta env npm github 可以基于本仓库去开发自己的vite

  • 微信小程序怎么设置单个页面颜色/顶部栏颜色/tabBar颜色

    微信小程序怎么设置单个页面的背景颜色 这个其实很简单 看看酱茄小编是怎么操作的 在对应的json里面写入以下代码即可 单页页面的背景颜色设置方法 navigationBarBackgroundColor FFFFFF 小程序tabBar 底

  • 数据清洗---数据整合

    数据整合可以使用Pandas库中merge 函数合并数据集 import pandas as pd 建两个数据集 df1 DataFrame lkey b b a c data1 range 4 df2 DataFrame rkey a b

  • 写selenium常用到的js代码

    selenium可以运行JavaScript代码 可以用一些JavaScript来辅助编写Selelnium代码 1 scrollIntoView 向下拉滚动条 使得某元素可见 IWebElement element driver Find

  • tensorflow NameError: name ‘layers‘ is not defined解决办法

    错误代码 import tensorflow as tf net layers Dense 10 net build 4 10 net kernel NameError name layers is not defined 错误原因 ten

  • 如何使用jquery通过id值修改指定的input的value值

    如何使用jquery通过id值修改指定的input的value值 定义和用法 示例代码 改变动态id的input值 定义和用法 val 方法返回或设置被选元素的值 元素的值是通过 value 属性设置的 该方法大多用于 input 元素 如

  • ant design pro v5 动态路由

    ant design pro v5 动态菜单 1 添加模拟数据 2 添加request请求 3 修改app tsx文件 a 第一步修改getInitialState b 第二步修改layout 4 app tsx 完整代码 5 解决icon

  • qt : day 3

    1 完成登录框的按钮操作 并在登录成功后进行界面跳转 pro QT core gui texttospeech greaterThan QT MAJOR VERSION 4 QT widgets CONFIG c 11 The follow

  • python研究生专业_用Python爬取了考研吧1000条帖子，原来他们都在讨论这些！

    写在前面 考研在即 想多了解考研er的想法 就是去找学长学姐或者去网上搜索 贴吧就是一个好地方 而借助强大的工具可以快速从网络鱼龙混杂的信息中得到有价值的信息 虽然网上有很多爬取百度贴吧的教程和例子 但是贴吧规则更新快 目的不一样 爬取的内

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

    文章目录 移动端调试 浏览器调试 进入控制台 进入浏览器模拟器 切换测试机型 添加测试机型 改变屏幕尺寸 改变DPR 改变网络情况 改变屏幕显示大小 横 竖屏切换 真机测试 扩展 远程调试工具 vorlon js 多终端调试工具 brows

热门标签