手机前端调试工具

最新推荐文章于 2025-05-08 16:53:54 发布

原创

最新推荐文章于 2025-05-08 16:53:54 发布 · 490 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Eruda——手机网页前端调试面板

Eruda github地址
实现类似于微信小程序的移动端调试效果。

    <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
    <script>
        // init vConsole
        var vConsole = new VConsole();<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_Girl200

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

手机网页前端调试工具

天马3798

08-07

1万+

一、Eurda 进行移动端网页开发时，想要查看手机浏览器信息从来都不是一件容易的事。特别是当目标环境为APP内置WebView，需要调用特定的JsBridge接口时，你根本都干不了什么，只能一遍又一遍地修改代码，重新打开页面并alert一下。你可能会说，可以使用Chrome，Firefox连接手机调试啊！但那样限定于使用相应的手机版浏览器，意义并不大。Weinre，Vorlonjs跟debugG

移动前端调试工具

12-25

nwjs 用于模拟查看html5代码跑在移动设备上的界面UI

参与评论您还未登录，请先登录后发表或查看评论

移动前端调试工具-Weinre真机调试

weixin_34220834的博客

11-25

170

之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试，能满足基本基本的需求，后来发现了基于Web Inspector(Webkit)的远程调试工具Weinre，可以在PC端直接调试运行在移动设备上的远程页面，，在PC端可以即时修改目标网页的HTML/CSS/Javascript，调试过程可实时显示移动设备上页面的预览效果，并同步显示设备页面的错误和警告信息，可以查看网络资源的信息，不支...

一探前端开发中的JS调试技巧

叶叶茵的博客

04-07

4092

js调试技巧

前端页面，手机端调试工具 vConsole.js

欢迎来到动感地带

04-03

1541

1.引入 <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>

android移动端调试—前端开发工具Eruda

DDD4V的博客

09-08

4766

Eruda 通过CDN使用： <script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js"></script> <script>eruda.init();</script> 通过npm安装： npm install eruda --save Js文件对于移动端来说略重（gzip后大概100kb）。建议通过url参数来控制是否加载调试器，比如： (function () { var...

一个轻量、可拓展、针对手机网页的前端开发者调试面板

07-07

vConsole是一款强大的移动端前端调试工具，其轻量级的设计、框架无关性、良好的可拓展性和在微信小程序中的官方支持，使得它成为手机网页及微信小程序开发者的得力助手。无论是排查问题、优化性能还是提升开发效率，...

手机网页前端调试面板

06-27

在手机上可以debug，如同浏览器上F12功能

移动端调试工具-vConsole

weixin_43867229的博客

03-26

1531

它可以直接嵌入到你的web页面中，提供了控制台日志，网络请求查看，元素查看等功能。：现在，你可以在手机上打开你的网页，然后在页面中看到vConsole的调试面板。

【转】手机web前端调试页面的几种方式

weixin_33725807的博客

03-01

2312

前言 PC端web页面调试比较容易，这里主要说几种移动端调试的方法，从简单到复杂、从模拟调试到远程调试，大概分为几部分： 1、Chrome DevTools（谷歌浏览器）的模拟手机调试 2、weinre(web inspectorremote)远程调试工具 3、微信的“web开发者工具”，集成了Chrome DevTools和weinre，做的比较好 4、Chrome DevTools...

腾讯开源的手机前端开发调试利器 vConsole.zip

07-19

1 前言我们在开发手机版网页的时候，常常会出现下面的情景： (1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log； (2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。如果说(1)还可以通过电脑连接手机以查看log来解决，那(2)在没有完善的前端上报体系时就非常被动了。作为开发者，我们的诉求很简单：有没有快捷的方法在手机前端页面看到log日志？2 vConsole前端调试面板莫慌，抱紧vConsole！vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。细心的同学可能会发现上面的log颜色各有不同。与电脑端的Developer Tools一样，开发者可以通过调用不同的方法来打出不同的颜色，以便快速区分日志类型：console.log('foo'); // 白底黑字 console.info('bar'); // 白底紫字 console.debug('oh'); // 白底黄字 console.warn('foo'); // 黄底黄字 console.error('bar'); // 红底红字第二个是“系统”面板，vConsole会自动将一些基础信息（如系统版本）打印出来，方便开发者定位问题。若页面是在微信内置浏览器中打开的，vConsole还会打印出微信版本号、当前网络类型等额外信息。默认情况下，vConsole的面板是隐藏起来的。我们可以点击右下角的“面板”悬浮按钮来显示vConsole面板。3 使用方法Talk is cheap, show me the code.首先，在需要展示日志的页面引入vConsole模块。我们建议在<head>中而非<body>底部引入，方便后续的新版本vConsole在页面初始化时预埋各种debug钩子。引入后，会自动生成window.vConsole对象实例。<head> [removed][removed] </head>对于更通常的情况，我们只需在调试模式下才启用vConsole，平时用户无需看到调试面板。这时候就需要开发者自行判断引入模块的时机。以PHP为例，通过判断URL中有无 dev_mode参数来选择性加载vConsole：<?php if($_GET['dev_mode'=='1'){?> [removed][removed] <?php}?>如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式，可以在module中使用require()引入vConsole：var vConsole =require('path/to/vconsole.min.js');好了，怎么打印log呢？与电脑端一致，可以直接使用console.log()等方法来打印日志，目前支持的方法有：console.log('foo'); console.info('bar'); console.debug('oh'); console.warn('foo'); console.error('bar');若页面未加载vConsole模块，console.log()会直接输出到原生控制台中；加载模块后，日志则会输出到原生控制台前端面板。因此不必担心兼容性问题。引入模块后，vConsole会有一小段时间用于初始化工作，在渲染出面板HTML之前将无法立即打印log。因此，若要在引入模块后立即打印log，应使用vConsole.ready()方法：vConsole.ready(function() { console.log('Hello World'); });4 在线demo微信扫描以下二维码（或微信内长按图片识别二维码），即可体验vConsole面板。目前vConsole已开源到WeChatFE的Github中。标签：腾讯前端工具

推荐几个前端开发很容易上手的软件~~

04-09

NULL 博文链接：https://jcs130.iteye.com/blog/1624630

前端开发中移动端调试的日常工具整理

2501_91510632的博客

05-08

536

每次调试都不是一件快乐的事。但选择合适的工具，可以有效降低异常追踪的成本。我的建议是：【基础调试用官方浏览器，急救用 vConsole / Eruda，深入分析时不妨用 WebDebugX 或 Charles Proxy】。不一定要用最多的工具，但最好是尝试一下这些工具，置身于日常，才知何为手艺之心。

前端移动端调试工具Eruda

小D科技的博客

10-24

1093

<script src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init()</script> 相对来说这是个比较强大的移动端调试工具，使用简单，两句代码就可实现，拿走不谢！...

android手机前端开发工具

嘿嘿嘿

07-05

1110

http://code.google.com/p/android-ui-utils/downloads/detail?name=AndroidDesignPreview-0.2.jar

手机前端开发调试利器 vConsole

chendd123123的博客

08-11

372

为什么要使用 vconsole.js ? 因为手机或者平板之类的客户端软件并没有控制台，前端开发想看log日志比较麻烦，如果一直弹窗alert方法实在太挫了。所以腾讯开发了这个 js 插件。手机端控制台打印输出，方便bug的排查。怎么使用？ 1、下载依赖 npm install vconsole 2、在main.js引入 import VConsole from 'vconsole'; var vConsole = new VConsole(); console.log('Hello world');

分享一个能在手机上调试的工具

weixin_33858485的博客

12-26

669

https://github.com/Tencent/vConsole 转载于:https://www.cnblogs.com/sincere-x/p/8116747.html

移动端调试——五款前端开发利器

诸葛韩信--一个前往前端不归路的浪子

05-31

496

web移动端真机调试工具

一呀一转转圈

03-19

647

web移动端真机上调试的两种工具： 1. vconsole 直接在html页面中引入vConsole的JS文件 <script src="vconsole.min.js"></script> <script> // 初始化vConsole var vConsole = new VConsole(); console.log('hellocode') </script> 页面会出现vConsole小图标，

前端调试工具有哪些

最新发布

07-15

常用的前端调试工具主要包括浏览器内置的开发者工具以及一些第三方插件或独立工具。以下是详细的分类和介绍： ### 浏览器内置开发者工具这些工具通常集成在主流浏览器中，为开发者提供全面的调试支持： - **Chrome DevTools**：这是目前最广泛使用的调试工具之一，功能强大且用户界面友好。它提供了多个模块用于不同的调试需求，例如 `Network` 用于监控网络请求、`Sources` 用于调试 JavaScript 和查看源文件、`Elements` 用于实时编辑 HTML 和 CSS 等[^3]。 - **Firefox Developer Tools**：与 Chrome 的 DevTools 类似，Firefox 提供了丰富的调试功能，包括元素检查、JavaScript 调试、性能分析等[^1]。 - **Safari Web Inspector**：苹果 Safari 浏览器中的开发者工具，主要用于调试网页内容和性能优化，特别适用于 iOS 平台的开发[^1]。 - **Microsoft Edge 开发人员工具**：随着 Microsoft Edge 基于 Chromium 内核，其开发者工具与 Chrome DevTools 非常相似，也具备类似的调试功能[^2]。 ### 第三方插件及独立工具除了浏览器内置的开发者工具，还有一些额外的工具可以帮助提高调试效率： - **Firebug（已过时）**：虽然 Firebug 曾是 Firefox 浏览器中最受欢迎的调试插件之一，但现在已经被 Firefox 自带的开发者工具取代。 - **IE 开发人员工具**：针对 Internet Explorer 浏览器，微软为其提供了基础的调试功能，但由于 IE 已逐步被淘汰，该工具的使用率也在下降[^3]。 - **Eruda**：这是一个轻量级的移动端调试面板，专为手机网页前端设计。通过简单的脚本引入即可快速启动调试功能，非常适合移动设备上的调试需求。具体使用方式如下： ```html <script src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init();</script> ``` 它能够帮助开发者快速查看控制台日志、网络请求信息以及其他关键调试数据[^5]。 ### 其他辅助开发工具除了直接用于调试的工具外，还有一些软件可以辅助前端开发并提升整体工作效率： - **WebStorm**：JetBrains 公司推出的一款专业 JavaScript 开发环境，集成了许多实用功能如代码高亮、自动补全、ESLint 支持等，并且内建了服务器调试功能，非常适合前端项目的开发和管理[^4]。以上列举的工具覆盖了从桌面到移动端的不同场景，开发者可以根据自己的需求选择合适的调试工具以提升开发效率。