精华内容
下载资源
问答
  • 这个小技巧在web端调试的时候特别好用,如果是PC端浏览器的话没有必要整合这个玩意了,主要是移动端设备上调试H5界面的,这篇文章将会演示uniapp和原生Html5整合vconsole;uniapp和vue的整合方式一样,不单独演示! ...

    这个小技巧在web端调试的时候特别好用,如果是PC端浏览器的话没有必要整合这个玩意了,主要是移动端设备上调试H5界面的,这篇文章将会演示uniapp和原生Html5整合vconsole;uniapp和vue的整合方式一样,不单独演示!

    vconsole这个玩意是腾讯开放的,这是我目前对接腾讯所有的东西中唯一我给好评的!
    先看看效果

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    效果显而易见,逼传统的大alert()调试要方便太多了,也不需要借助其他外部工具插上设备调试!

    uniapp整合vconsole
    1.移入npm

    npm install vconsole
    

    2.使用
    main.js 文件里面添加下方代码。

    // #ifdef H5
    	// 提交前需要注释  本地调试使用
    	const vconsole = require('vconsole')
    	Vue.prototype.$vconsole = new vconsole() // 使用vconsole
    	// #endif
    

    搞定,重启项目就会在右下角出现一个绿色的按钮

    html5整合vconsole
    1.导入js脚本

    <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    

    2.初始化

    <script>
        // 初始化
        var vConsole = new VConsole();
        console.log('Hello world');
    </script>
    

    搞定

    展开全文
  • 具体操作 1.首先是手机, 设置–>Safari–>高级–>Web检查器, 把web检查器打开,如下...3.在手机上打开一个网页,在mac上的safari上 开发–>“手机的名称”(我的是wtcsy) , 如下图所示 4.点击后面的地址,...

    具体操作(注意,电脑手机要数据线连接起来!!!)
    1.首先是手机, 设置–>Safari–>高级–>Web检查器, 把web检查器打开,如下图

    在这里插入图片描述2.然后是mac上safari的设置, Safari–>偏好设置–>高级–>在菜单栏中显示"开发"菜单,如下图所示
    在这里插入图片描述

    3.在手机上打开一个网页,在mac上的safari上 开发–>“手机的名称”(我的是wtcsy) , 如下图所示
    在这里插入图片描述

    4.点击后面的地址,会弹出一个框,切到调试器,就可以断点了,还可以console,截一个断点的图
    在这里插入图片描述

    展开全文
  • 在Android 开发中,我们难免要...但是要在手机上调试网页端,也就是看网页端的js是否有错。 调试链接:chrome://inspect/#devices 用法:就是让手机端端上的webview显示网页区域转到PC端上去,这样容易操作和调试

    在Android 开发中,我们难免要进行和webview的js交互,也就是在手机端的一个显示区域来访问网页端。但是网页的调试用chrome 调试是最好不过的。但是要在手机端上调试网页端,也就是看网页端的js是否有错。

    调试链接:chrome://inspect/#devices

    用法:就是让手机端端上的webview显示网页区域转到PC端上去,这样容易操作和调试

    展开全文
  • 有时候为了想在手机真机上对网页进行 Debug,可手机上没有 F12,用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现,正好解决了这一痛点! (下列内容照搬一下官方文档……) vConsole 介绍 vConsole 是...

    有时候为了想在手机真机上对网页进行 Debug,可手机上没有 F12,用 Chrome DevTools 连接手机操作又太过复杂。VConsole 的出现,正好解决了这一痛点!

    (下列内容照搬一下官方文档……)

    vConsole 介绍

    vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。

     在线体验 官方网站

    功能

    • 查看 console 日志
    • 查看网络请求
    • 查看页面 element 结构
    • 查看 Cookies、localStorage 和 SessionStorage
    • 手动执行 JS 命令行
    • 自定义插件

    使用方法

    从 GitHub 上下载最新版本,然后按下列方式在你的网页中引入:

    <script src="vconsole.min.js"></script>
    <script>
        new VConsole();
    </script>

    然后你就可以在页面的右下角看到一个绿色的 vConsole,点开它就能使用了,整体界面和 Chrome 的控制台类似,非常方便!

    不过,这样引入的话无论是在电脑上还是手机上,无论是站长和访客都能看到这个按钮。有点不太友好……为此,我们可以采用下面的方法:

    <script>
    if ((location.href || '').indexOf('vconsole=true') > -1) {
        document.write('<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><\/script>');
        document.write('<script>new VConsole()<\/script>');
    }
    </script>

    这样,正常访问网站时不会加载这个工具,仅当在网址后面加上 ?vconsole=true 时才会载入,按需开启,非常好用!

    同类工具

    除了 vConsole 外,还一个开源项目 Eruda,功能与之类似(貌似还强大一些?),这里就不过多介绍了。 感兴趣的可以自行去 Eruda 的 GitHub 上研究吧~传送门:https://github.com/liriliri/eruda

    展开全文
  • (1)自己写http post get的代码,user-agent模拟手机上的user-agent; (2)利用webbrowser控件,更改webbrowser发出去的cookie(但不一定有效,对我要研究的网站是有效的,但对我们自己的网站却无
  • 本文摘自Google ... ...接下来你就可以在你手机上模拟你在电脑上写的Html网页等手机端页面或应用程序   楼主才疏学浅,不喜勿喷 转载于:https://www.cnblogs.com/wangyulong/p/6029162.html
  • 用Chrome调试Android手机上网页

    千次阅读 2016-03-07 10:59:35
    Chrome的开发者工具虽然很好用,但面对越来越多的手机型号,也显得有些力不从心,经常出现的情况之一是,在Chrome里调试得好好的页面,在手机上就变得不是那么一回事了。为此我们需要使用Chrome的远程调试功能。
  • PC端chrome浏览器如何调试多点触控事件/chrome浏览器远程调试手机上网页 最近学习移动端网页开发的时候,遇到了一个问题,如何在真机上看到控制台输出的内容。 虽然现在的桌面浏览器提供了模拟手机的功能,但是...
  • 今日,接到一个任务,后台多个页面的搜索框在手机上显示不出来,让解决此问题。从网上搜索的情况看,大致有两种方法。 第一种:手机用usb连接电脑,然后开启调试模式来做。 这个我电脑用着有问题,前置usb接口有...
  • 2.电脑和手机上都要安装最新的Chrome浏览器; 3.手机连接电脑,会出现下载安装驱动的提示并安装成功(并不是所有的手机都会这么顺利,比如我的魅族就无法安装驱动,公司的小米5C非常顺利,连接就安装成功了,再次...
  • 用手机看网页,越来越多,手机app套个webview的也很多,那该如何调试手机上的页面了?比如 断点,选dom,console,控制台输出,查看内存,== 嗯,万能的的chrome和safari还是帮我们解决了这些事情 如何用本地的文件代替...
  • 下面的方法,只适用于安卓手机和windows,并且都需要谷歌浏览器。手机(安卓机)需要安装chrome与电脑的chrome配合1....最后在手机的chrome打开你想要调试的页面;2.电脑的准备工作用数据线...
  • 实际,Chrome和Android(需要4.4+版本)已经提供了不亚于电脑版本的调试功能,只是看样子还有好多人不知道,所以写下来分享给各位。本文遵循CC协议,欢迎转发,但请注明作者和出处...
  • 手机上可以debug,如同浏览器上F12功能
  • 如何调试手机网页

    千次阅读 2014-12-23 00:07:44
    哈哈,这样的开场白太那个了……其实实不相瞒,俺的实际情况是,到项目后期才懂得那么一点页面调试手段,之前怎么弄……不怕见笑,还是 console.log/alert 几招,甚至几招都算不,,好原始的说……嗯,少废话,来...
  • 手机端页面,大多运行在webkit内核的浏览器,但还是会因平台、厂商的不同而有种种兼容性问题。下面就介绍一下在iOS和Android两个平台如何在真机对页面进行调试。这里要说明的是,iOS平台只能用自带的Safari...
  • asp.net mvc 网页调试--手机上看效果

    千次阅读 2018-02-28 11:39:51
    总体来说,手机上调试网页效果,也就是将手机和电脑在同一局域网下,然后将本电脑ip绑在项目上就可以了。虽然说思路是这样,怎么绑却不知道。1.打开iis express 将配置文件打开2.找到要绑定本机ip的站点名称,加上...
  • 如何用windows电脑+ios调试手机上打开的网页 一、环境 PC chrome浏览器(版本45、46) IOS safari浏览器(11.2.6) win系统(win7、win10) 一根USB数据线 二、打开iphone上 Safari浏览器的web检查器 设置 --&...
  • 开发手机页面以及Hybird应用时,调试曾经是个老大难问题,不时需要用写log等方式曲线救国。 实际,Chrome和Android(需要4.4+版本)已经提供了不亚于电脑版本的调试功能,只是看样子还有好多人不知道,所以写下来...
  • 手机网页调试方案

    千次阅读 2014-12-23 00:19:30
    手机网页开发的特定阶段,需要查看手机端的界面、交互与体验。2011年时,开发时有很大麻烦: 相应的静态文件在测试服务器,没有上线,需要绑定hosts 而手机端直接绑定hosts是需要越狱/root的有的手机...
  • 所以需要在手机上模拟控制台输出日志来查看是否有报错。 安卓手机解决办法: 在微信上打开:https://debugx5.qq.com/?from=singlemessage出现以下图片 需要在手机端查看调试的时候,切换到第二个Tab栏 ...
  • 用chrome 调试手机微信X5网页

    千次阅读 2018-12-04 11:29:43
    1.开启手机的USB调试功能 点设置-》开发者选项-》USB调试 如果看不到开发者选项,在关于手机中点击内部版本号7次,即出现开发者已启用的提示。 将手机通过USB连接到电脑 2.开启微信手机调试功能 在微信中...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 576
精华内容 230
关键字:

手机上调试网页