- 综合排序
- 最热优先
- 最新优先
- 来自专栏强仔博客
vConsole 让你在手机上也能轻松调试网页
vConsole相信各位并不陌生，它是一个轻量、可拓展、针对手机网页的前端开发者调试面板。 有时候为了想在手机上对网页进行 Debug，可手机上没有F12，电脑却又不在身边，请不要着急， 这时就需要vConsole了， vConsole是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板 Cookies、localStorage 和 SessionStorage 手动执行 JS 命令行 自定义插件 ---- 点我在线体验 使用方法 从Github上下载最新版本，然后按下列方式在你的网页中引入
3K20编辑于 2021-12-21 - 来自专栏WflynnWeb
手机网页调试工具-兼容IOS与安卓
最近在开发微信公众号网页的时候，由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug，但这些bug只会在固定的机型或者部分手机复现，电脑端调试以及大部分手机都是没有问题的。 所以需要在手机上模拟控制台输出日志来查看是否有报错。 安卓手机解决办法： 在微信上打开： https://debugx5.qq.com/? from=singlemessage 出现以下图片 需要在手机端查看调试的时候，切换到第二个Tab栏 勾选vConsole调试功能即可在手机网页上查看控制台输出 清理手机网页缓存的方法 首页下拉到最后面 查看调试的方法 当打开手机网页时网页右下角会出现vConsole按钮，其功能与电脑上的开发者工具类似，算是迷你版的开发者工具。点击按钮就会出现下列界面，此处可以查看日志打印，本地存储等各类信息。 以上就是安卓端手机网页开发时调试的方法。 ios网页调试的方法 IOS不支持X5内核所以不能使用上述方法。但是可以直接在html中嵌入vconsole.js 下面为嵌入方法： <!
1.6K10编辑于 2022-10-28 - 来自专栏WflynnWeb
手机网页调试工具-微信网页小程序调式，日志打印，缓存清理
最近在开发微信公众号网页的时候，由于手机端的各种不适配或者机型的问题出现了很多莫名其妙的bug，但这些bug只会在固定的机型或者部分手机复现，电脑端调试以及大部分手机都是没有问题的。 所以就找到了一个可以在手机端调试的工具。 此调试只支持安卓手机，苹果手机暂不支持。 在微信上打开 https://debugx5.qq.com/? 接着当需要在手机端查看调试的时候，切换到第二个Tab栏 根据需要打开日志调试，一般情况下只查看日志只需要打开vConsole调试功能。 查看调试的方法，右下角会出现vConsole点击打开 默认打开的首页就是日志查看的页面。 以上就是安卓端手机网页开发时调试的方法。
1.9K50编辑于 2022-10-28 - 来自专栏call_me_R
移动端网页调试
尽管移动端网页与桌面端网页有诸多差异，但是说到底它还是一个在浏览器里浏览的HTML网页，所以最常用的还是在桌面借助Chrome调试器。 当需要调试手机页面的时候，将设备与计算机通过数据线连接后，在Safari菜单开发栏下选择当前手机运行的页面即可。 优点：可以完全在真机设备上调试网页，无论是HTML和CSS，还是脚本和请求，都和在桌面浏览器一样，最重要的是当前调试的是在真实环境下的页面。 Google Chrome DevTools通过USB数据线直接调试手机上的网页。 只需要准备下面几个步骤： 在Andriod"开发者"选项里打开USB调试模式。 插上USB数据线。 优点：同时支持iOS设备和Android设备，并且能直接对手机上的页面进行调试，无须安装客户端。 缺点：需要对HTML页面有改动的权限，因为是远程连接的原因，可能网络连接速度会影响调试的响应。
1.8K30发布于 2019-07-31 - 来自专栏全栈程序员必看
HTML制作网页_手机制作html网页
一、简介 ---HTML文档=网页 ---HTML：Hyper Text Markup Language ---HTML标签：不区分大小写，有些大写是自动生成的，页面包括页面标签和页面内容 ---网页文件格式 哈哈哈，老孙来也</title> </head> <body> 师父 </body> </html> 4、保存，关闭后，直接双击打开网页
13.6K10编辑于 2022-11-09 - 来自专栏前端技术开发
eruda手机端调试神器
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，如果想在手机上能和浏览器一样看控制台调试就更加完美了； 一个手机端调试神器eruda是一个专为手机网页前端设计的调试面板 只要在我们的html文件中写入下面这些代码，在手机上，也能想浏览器控制台一样进行查看。
2.8K10发布于 2019-09-23 - 来自专栏编程微刊
uniapp连接手机调试
需要将手机用充电线连接电脑，并且允许USB调试（这一步很重要，不然HBuilderX搜不到你要调试的手机，无法建立连接。） 如果不会打开USB调试模式，可以自行百度，我的是oppor的手机 我就查了一下，oppor手机怎么打开USB调试模式. https://jingyan.baidu.com/article/93f9803fed1cfbe0e56f554d.html 3：真机调试 打开顶部菜单栏中的“运行”菜单，点击运行，选择运行到手机后者模拟器 这个时候HBuilderX是自动检测手机是否连接，（如果运行设备为灰色，则说明没有手机没有连接成功）。 连接不成功的原因有很多，比如，手机没有打开usb调试模式，电脑中其他软件占用adb通道等。 连接成功，控制台里面会有这样的提示 并且在手机端提示安装HBuilderX，同意安装就行了。 4：调试结果 每次调试的时候，只需要打开HBuilderX，就能同步看到开发工具里面编辑的内容了。
3.6K00发布于 2020-11-26 - 来自专栏前端开发随笔
vconsole进行手机端调试
copy到index.html <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); console.log('Hello world'); </script>
3K40发布于 2020-09-03 - 来自专栏IMWeb前端团队
移动端网页调试方案
iOS 8.0及以后的WKWebView，主流应用内均使用它作为容器展示html Android平台 WebView实现一般为Android WebView，部分手机厂商会默认设置成chrome实现，差别不是很大 微信平台 微信iOS端是采用wkwebkit进行渲染的，Android平台采用的是x5内核 debug方案 Android端 由于移动端网页开发不能直接打开developer tools，导致我们调试起来稍微麻烦 Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } 手机打开 usb调试 手机和电脑通过数据线连接，通过命令行执行，显示如图之后，表示成功连接 adb devices 执行结果 然后从chrome浏览器F12找到Remote devices RemoteDevices 调试工具weinre 由于某些app并没有打开remote debug，而我们又要内嵌自己的页面进行调试，抓包只能检测网络请求。所以这个工具就有了使用场景。
1.7K30发布于 2019-12-04 - 来自专栏zjblog
网页自适配手机端
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。 之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。 当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。 一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。 之前呢，考虑到很多人通过链接在手机上打开了我的博客，为了让他们访问加了个电脑访问的提示。通过js判断是否手机打开，如果是就弹窗提示。 = -1) { isMobile = true; alert("本博客手机打开不适配，建议使用电脑访问效果最佳！ css最烦的就是调来调去还差点的，特别是屏幕宽度，就很无语~ 手机适配的话先加个meta viewport。
3.6K30编辑于 2022-06-21 - 来自专栏前端开发
手机上debug调试代码
有时候为了在手机上调试网页，大都是大费周章，有的使用Chrome DevTools远程链接手机调试，有的使用专门的工具或者浏览器调试，现在腾讯开源了一个vConsole的工具，就解决了这一个痛点！ vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 然后你就可以在页面上看到一个绿色的vConsole里面调试和谷歌的控制台基本类似。 但是这样使用除了开发者，用户也能看到这个按钮，所以咱们可以稍微设置个参数。 例如：增加个query参数，vconsole=true 作为开启调试的开关。当然你也可以自己设置自己想要的参数。 vconsole=true就开启了隐藏的调试功能啦！很方便有木有。 好，我又水了一篇文章，另外本文参考自孟坤大佬的文章 end…
1.8K20发布于 2021-04-22 - 来自专栏cwl_Java
前端基础-CSS网页调试
网页调试（重点） 开发者工具对于开发者来说特别重要，只要你开发你就离不开它。一定要学会使用 作用：调试代码 检测代码的！！ 在网页中点击右键，选择（审查元素/查看元素/检查）或者按F12，在右侧或下面会打开一个窗口，窗口最左边是查看html的结构，network是查看网页的http请求加载，console是控制台，查看网页中打印的信息 ，也可以自己写调试代码，source中是网页的所有资源。 主要掌握elements这个面板 右侧的style就是当前标签对应的css样式 我们可以通过这个来检查代码错误和调试代码！！
82220发布于 2020-04-07 - 来自专栏家劲
移动端网页调试方案
移动端调试方案 移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre iOS 8.0及以后的WKWebView，主流应用内均使用它作为容器展示html Android平台 WebView实现一般为Android WebView，部分手机厂商会默认设置成chrome实现 微信平台 微信iOS端是采用wkwebkit进行渲染的，Android平台采用的是x5内核 debug方案 Android端 由于移动端网页开发不能直接打开developer tools，导致我们调试起来稍微麻烦 usb调试 手机和电脑通过数据线连接，通过命令行执行，显示如图之后，表示成功连接 adb devices ? 调试工具weinre 由于某些app并没有打开remote debug，而我们又要内嵌自己的页面进行调试，抓包只能检测网络请求。所以这个工具就有了使用场景。
2.2K20发布于 2019-09-18 - 来自专栏全栈程序员必看
android开发连接手机usb调试模式,安卓手机usb调试在哪里 安卓手机usb调试模式设置教程…
大家好，又见面了，我是你们的朋友全栈君 安卓手机usb调试在哪里这个经常问倒一些机友，因为安卓系统和手机型号的不同，USB调试所在位置稍有不同，部分机型甚至采用了隐藏设置，跑跑车这里分享了安卓系统下各种手机的 USB调试模式设置教程，从此让你的电脑与手机可以自由连接。 系统打开USB调试模式方法 1、同样的点击手机Menu键(菜单键)，在弹出的菜单中选择 设置(Setting), 或在应用程序中找到“设置 程序点击进入“ 关于手机”如下图： 2、然后这里需要注意的是安卓 ； 六、特色机型 部分三星机型，如I5508，在通过USB连接到电脑后，手机端提示选择“USB设置”模式，请选择“Kies”，选择此模式后相当于打开了“USB调试”开关。 更有部分手机系统无usb调试选项，默认即为开启。 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
7.6K30编辑于 2022-09-30 - 来自专栏大大的小蜗牛
手机网页 meta 解释
第一个 meta 标签表示：强制让文档的宽度与设备的宽度保持 1:1，并且文档最大的宽度比例是 1.0，且不允许用户点击屏幕放大浏览；
1.3K20编辑于 2022-12-16 - 来自专栏MeowRain的博客
Chrome网页截图（电脑+手机）
很多人电脑截图都是使用QQ截图，很明显，它没办法长截图 电脑方法： 打开chrome或者edge 打开你想长截图的网页 按下F12进入开发者工具 按下 ctrl+shift+p 出现如下界面： 输入full 点击 完成： 上面证明我们已经搞到图了 实际效果： 拿电脑chrome截手机网页的长截屏 打开你想截屏的网站，点这个手机状的图标 进入手机端页面 点击这个图标 选择全截屏 已经拿到了 实际效果
3.3K10发布于 2021-04-22 - 来自专栏全栈程序员必看
手机不显示允许usb调试_安卓手机怎么开启usb调试模式
问题 真机调试，连接USB后，通常会显示如下认证。 未认证的设备显示如下 有些机器在某些情况下，可能没有弹出认证窗口，可以通过下面的方式尝试解决。 解决 执行 adb reconnect 在开发者选项中撤销USB调试授权 重新插拔USB调试线 重新你的手机 尝试关闭，开启一次USB调试 尝试关闭开发者模式，重新打开开发者模式 上述方式没有顺序要求
4.4K10编辑于 2022-10-01 - 来自专栏日积月累1024
使用weinre调试手机页面
Weinre（Web Inspector Remote），是一种远程调试工具。功能与Firebug及chrome调试器类似，可以帮助我们即时更改页面元素、样式，调试JS等。 工作原理 ? 假设我们要调试的页面运行在10.136.30.144:3927 页面中引入js后，用手机浏览器打开待调试页面 http://10.136.30.144:3927/new 4. 开始调试 手机访问页面后，我们回到步骤2中所说的调试界面。发现此时，targets中多了一条，即是我们在步骤3中用手机打开的待调试页面。 ? 点击该target，即可利用熟悉的调试界面进行调试了。 ? 其它说明 1. 用手机连续访问多页面，这些页面都会在targets中列出，选中其中一个，即可进行调试。 2. 点击调试页面中的remote, 可以从调试页面切回targets列表。 3.
1.5K30发布于 2020-12-07 - 来自专栏我的博客
关于制作手机网页笔记
1、px和rem换算 em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便 rem 的出现就可以避免这类计算的问题，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的！ html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} 如果你设定html { font-size:100%;} 那么计算的时候就是用px的值
2K80发布于 2018-04-28 - 来自专栏OECOM
开发移动端网页调试方法
大家在开发pc端网页的时候调试很方便，直接用浏览器打开就可以了，但是如何进行移动端网页的调试呢。 大致的移动测试调试都可以在这里进行。但是这并不完全精确，精确的调整还需要到真机中进行测试。 然后我再来说一下真机如何测试，有的朋友是将网页放到手机里，然后在打开，如果是html页面，还可以打开，但是如果是jsp页面就无法实现了。 一般我们在开发网页过程中都会安装服务器运行环境，最普遍的是tomcat和phpAdmin两种，关于这两种运行环境我就不在这里介绍了，我重点说一下如果通过移动端连接pc端建立的服务器里部署的网页。 然后手机端浏览器输入该地址也可以访问，这样就可以一边修改一边在真机上查看效果了。
1.4K20发布于 2020-07-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号