手机前端调试工具

  • 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();<
1 前言我们在开发手机版网页的时候,常常会出现下面的情景: (1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log;  (2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息。如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了。作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志?2 vConsole前端调试面板莫慌,抱紧vConsole!vConsole是一款由微信公众平台前端团队打造的前端调试面板,专治手机端看log难题。目前vConsole自带有2个面板,默认为“日志”面板,负责展示log。细心的同学可能会发现上面的log颜色各有不同。与电脑端的Developer Tools一样,开发者可以通过调用不同的方法来打出不同的颜色,以便快速区分日志类型:console.log(&#39;foo&#39;); // 白底黑字   console.info(&#39;bar&#39;); // 白底紫字   console.debug(&#39;oh&#39;); // 白底黄字  console.warn(&#39;foo&#39;); // 黄底黄字  console.error(&#39;bar&#39;); // 红底红字第二个是“系统”面板,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[&#39;dev_mode&#39;==&#39;1&#39;){?>  [removed][removed]   <?php}?>如果项目中用到了CommonJS或SeaJS这种AMD/CMD规范的模块加载方式,可以在module中使用require()引入vConsole:var vConsole =require(&#39;path/to/vconsole.min.js&#39;);好了,怎么打印log呢?与电脑端一致,可以直接使用console.log()等方法来打印日志,目前支持的方法有:console.log(&#39;foo&#39;);  console.info(&#39;bar&#39;);  console.debug(&#39;oh&#39;);  console.warn(&#39;foo&#39;); console.error(&#39;bar&#39;);若页面未加载vConsole模块,console.log()会直接输出到原生控制台中;加载模块后,日志则会输出到原生控制台 前端面板。因此不必担心兼容性问题。引入模块后,vConsole会有一小段时间用于初始化工作,在渲染出面板HTML之前将无法立即打印log。因此,若要在引入模块后立即打印log,应使用vConsole.ready()方法:vConsole.ready(function() { console.log(&#39;Hello World&#39;);  });4 在线demo微信扫描以下二维码(或微信内长按图片识别二维码),即可体验vConsole面板。目前vConsole已开源到WeChatFE的Github中。 标签:腾讯  前端工具
常用的前端调试工具主要包括浏览器内置的开发者工具以及一些第三方插件或独立工具。以下是详细的分类和介绍: ### 浏览器内置开发者工具 这些工具通常集成在主流浏览器中,为开发者提供全面的调试支持: - **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]。 以上列举的工具覆盖了从桌面到移动端的不同场景,开发者可以根据自己的需求选择合适的调试工具以提升开发效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值