我最近在学习做移动端页面，当做好一个移动端页面后想使用手机查看一下移动端页面在手机上的效果，找了很久才找到一个比较好的方法，特意写这篇文章记录下在手机上查看移动端页面的方法
用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发，与真机上的效果还是有些偏差，opera手机模拟器的效果亦不佳。有时在pc上开发出来的webapp效果良好，在部分真机上就出现了偏差，这时候就需要我们进行微调。 在pc上微调后发布到测试环境再在手机上看效果，开发很慢，效率很低。这时候就想着有一个可以在手机上调试的工具，可以随时更改参数随时看到手机上的效果，免去发布再测试、模糊估计参数不精准的麻烦，weinre就是一个这样的工具。 weinre可以在PC上远程调试手机上的
之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）！！！那问题就来了，开发环境下没报错，可真机又出现了意料之外的情况，而且没法像 PC端 那样祭出 F12 大法，怎么定位问题并解决呢？最后凭借着我（谷歌）的聪明才智，找到了媲美 PC端 调试体验的方式。在此总结一波，献给各位被移动端真机调试折磨，而又无从下手的前端er们，话休烦絮，直接奉上：
最近小编接了一个新需求，用h5开发页面，通过webview嵌入原生APP中，自己在浏览器上开发爽歪歪，什么信息都能看到，可是一嵌入原生app中，瞬间就熄火了，啥也看不到了，不知道为什么，反正就是页面点不动了。
* 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log…
使用隐身窗口，首次打开网站，不会带上cookie，能够观察页面的获取情况，包括对方服务器如何设置cookie在本地
在开发安卓微信页面时，刚开始一般是会在PC上进行，等到开发后期的自测阶段再转到安卓模拟器上、转到各种真机上自测，上线了如果出问题还需要在真机上调试测试。
很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但是一旦出现问题，我们就很难解决，因为缺乏可视化的界面。不似在PC端，我们能直观的去改变样式，或者是进行断点调试。有时，在移动端我们不得不借助于alert来调试，但是这样的调试方法效率极其低下，很多时候，都是靠经验，或者是靠排除法。甚至，我们不得不归结为是浏览器的实现问题。
视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。
eruda与腾讯推出的vconsole很相似，都是用于移动端的调试，让开发者在移动端的浏览器中获得近似PC端浏览器的调试能力。 截止至本文发稿之日，eruda在GitHub上已经有2.7K个star
先上最终效果： 最近做了一个用手机浏览器访问的web应用，采用较流行的HTML5，为了提高开发效率节省时间决定采用现有开源框架，免去了自己做设计与兼容性。 一些比较优秀的框架：10大优秀的移动Web应
React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。
iOS版微信隐藏着一个查看网页源代码的功能！ P.S.这个功能不是对所有人都有实用性。 然后设置出现后我也不知道怎么关掉它。
上面说 weinre 是一个远程 web 调试器。说到了它的发音，还挺幽默，哈哈。
做接口测试肯定离不开抓包，目前比较流行的抓包工具是fiddler和charles，相信并不陌生。这里介绍一个阿里公司研发的一个抓包神器，只需打开web页面，就能抓到手机app上的http和https请求了。 这样就有个好处，当一个公司测试团队有多个人的时候，只需搭建一个AnyProxy服务，其它小伙伴浏览器上打开AnyProxy页面，手机上设置个代理就能刷刷刷的抓到请求了。 解决了部分人电脑不正经的小伙伴fiddler死活抓不到https请求的问题，也解决了破解charles安装的问题，也不用去每个电脑都去安装一个抓包工具的问题。 AnyProxy完美的解决了跨平台使用，不管你是windows电脑，mac电脑，手机app，只需搭建一个服务，都能抓到接口请求数据。
ruda 是手机浏览器中的开发者工具，是一个JS插件，在自己的页面中引入即可 Eruda 的由来 Eruda 的作者以前在手机中进行页面开发时，感觉日志输出非常麻烦，经常使用类似 window on
最近在 手机上要显示 PDF 文件，在搜索引擎上找到了很多方案，大体上有以下几种：
现已支持Google Chrome 和 Microsoft Edge浏览器，在插件商店中搜索安装就行了。
这里所说的相连是指处于同一个局域网的环境下，有问题请看上一篇Auto.js脚本开发环境搭建。
很多的公司目前的网站仍然是只有电脑版的网站，在手机上无法良好的展示，在智能手机上网越来越普遍的趋势下，公司网站具备移动友好性，在手机上具有良好展现的特性是非常重要的。而如何解决公司网站在手机端良好展示的实际需要呢。下面是两种解决方案，可供需要的公司参考。
日常工作中再牛逼的大佬都不敢说自己的代码是完全没有问题的，既然有问题，那就也就有调试，说到调试工具，大家可能对于fiddler、Charles、chrome devtools、Firebug、还有Safari远程调试等比较熟悉，甚至有些是我可能也没有用过的；
reveal.js 是一个展示内容的框架，可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。
文章目录 四、测试工具 1. 单元测试 单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有： * QUnit * NodeUnit 1.1 前端单元测试QUnit 首页：http://qunitjs.com 源码：https://github.com/jquery/qunit QUnit是jQuery团队开发的JavaScript单元测试工具，功能强大且使用简单。目前所有的JQuery代码都使用QUnit进行测试，原生的JavaScript也可以
前言 最近参加学校比赛，由于业务需求要做一个App，当时心想我不是web开发的吗?App跟我有啥关系？而且之前也没去了解相关的东西，当时很慌啊队友还说上一次某某某三天就出了个App，我..... 怀着
最近在开发微信公众号网页的时候，由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug，但这些bug只会在固定的机型或者部分手机复现，电脑端调试以及大部分手机都是没有问题的。所以需要在手机上模拟控制台输出日志来查看是否有报错。
一些调试工具 说起手机端调试，相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具，所以一般手机端的调试都要借助于电脑，现在的调试方式通常有以下几种。 直接在chrome, firefox等开启模拟器调试简单直接，还能模拟网络等，但是仍然无法100%还原手机的真实情况。 实现一套pc调试面板 采用这种实现方式有weinre，weinre很早前就比较流行了，使用也比较广泛，运行后会在PC上生成一个像chrome开发工具一样的调试器。能对手机进行远程调试，能操作DOM，打印console输出等
在《是时候放弃插件密码管理器，改用密码管理器插件了》一文中，我们谈到插件密码管理器的安全性不够。
手绘地图顾名思义就是手工绘制的地图，比普通的地图更有观赏性和生动性，通过把特定的地点绘制出来，兼具实用和纪念性，同时更加具有可看性。一般在旅游景点有很多这种纸质版手绘地图。比如这种：
此时可以看到dist目录的文件图标由 W 变成了 A，说明此时的web项目已经变成了移动APP项目 ，而且此时生成了一个新的文件manifest.json
Weinre(全称Web Inspector Remote)是一款的可以在电脑上远程调试手机页面的工具。
昨天，发布了《完美实现移动主题在 360 网站卫士缓存全开情况下的切换》一文，通过 JS 实现了主题在移动端访问时的自动切换，最后提到了可以在电脑版和移动版的 footer 里面加上手动切换链接，实现手动版本切换功能。 今早发现，电脑版切换到移动版是没问题了，但是移动版切换到电脑版，JS 将会再次工作uaredirect.js会再次做 UA 判断，然后由又跳回了电脑版！ 也就是说，手机上浏览无法手动切换到电脑版，看来还得继续折腾！ 于是，想到一个办法，给移动版的切换链接带上一个参数，再修改 uaredire
既然都是前端开发，两者肯定有紧密的联系，移动前端开发和web前端开发其实都属于前端开发的范围，目前前端发展的趋势就是大前端，可以说是包罗万象，当然也就包含PC端和移动端领域，而现在的前端开发人员也已早就不是当年的切图仔了，需要学习和掌握大前端体系方方面面的知识才能在日常的开发中游刃有余，但是不论趋势如何发展，目前来看HTML、CSS和JavaScript依然是整个前端开发的三大基石。所以不论是想做移动前端开发还是web前端开发，这三样基础技术都必须熟练掌握。
到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑，如果大家有遇到什么别的坑，欢迎补充，或者觉得我哪里写错了，欢迎指点！
最近在开发微信公众号网页的时候，由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug，但这些bug只会在固定的机型或者部分手机复现，电脑端调试以及大部分手机都是没有问题的。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/139416.html原文链接：https://javaforall.cn
公众号的H5网页,里面跑的语言是JS,本质是脚本语言.是没有能力调用硬件的API的. 微信这个是本地APP,本身就有很多调用硬件的能力,比如拍照,扫码,速度计,GPS定义等等. 那就我们就可以在微信里面打开公众号的网页,这个网页调用微信,微信调用硬件不就可以了.能做的事情就很多了.
通过 HTML5 开发移动App 时，会发现HTML5 很多能力不具备。为弥补HTML5 能力的不足，在W3C 中国的指导下成立了www.HTML5Plus.org组织，推出HTML5+规范。
sharing 是一个大小只有 200kb 的命令行工具，可以将文件或者文件夹共享到 iOS 和 Android 设备，而这些设备无需安装客户端，就可以实现数据的传输。
最近要分析web页面，在安卓和ios上的性能差异，除了操作系统本身不同之外，应该还多地方要探究的，第一步就是要在真机上分析。所以总结一下几个方法。
某些页面需要设置HOST才能进行访问，在iPhone上不好设置HOST，所以需要一些代理工具帮助我们
在App开发中，内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。 然而便利性的同时，WebView的性能体验却备受质疑，导致很多客户端中需要动态更新等页面时不得不采用其他方案。 以发展的眼光来看，功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢？我们将从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默认WebView的问题，以及对应的优化方案。 性能 对于WebView的性能，给人
之前上传图片很大没怎么理会，手动调一下，最近发现在手机上查看没法自适应，很是烦，便想着改掉这个问题。
或许这是一个好的主题，又或许这不是一个好的主题。但是至少我可以Share一下我的经验： 基于Mustache模板引擎的前后台渲染。 基于PreRender方式的Angular.js应用的后台渲染 服务端渲染的React 开始之前，我希望即使你们需要后台渲染，你们也应该前后端分离！由后台来提供API数据，前端用自己的后台来渲染页面。听上去有点绕，简单的来说就是不要把大量的业务逻辑放前台来，只把显示逻辑放在前台上。这样一来，即使有一天我们换了新的前端，如移动应用，那么我们的后台也是可用的。 0 前后端分离 这是
微信在发布小程序之前，有一个佐助微信 Html5 页面开发的 WeixinJSSDK，地址是这个：
0. 前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者
在那篇《最流行的编程语言JavaScript能做什么？》里，我们列举了JavaScript在不同领域的使用情况，今天让我们来详解一下JavaScript在物联网中的应用。 凡是能用JavaScript
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
