5款web前端开发利器

更新日期: 2019-10-21阅读: 2k标签: 工具

1. vConsole 推荐指数:★★★☆☆

腾讯出品的 Web 调试面板,相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮,可以点击它来打开关闭调试面板,并查看 dom、Console、Network和 本地存储 等信息。基本可以满足普通前端开发的需求。使用方法也很简单,通过npm安装或者直接在需要的页面引入 js文件 ,然后 new VConsole() 就可以了。不熟悉的小伙伴可以直接去官方的 GitHub 看 README。但是它并没有解决我的问题,因为我的 bug 严重到一进页面就报错,脆弱的 javascript 直接原地爆炸,页面一片空白。

同类产品 eruda

2. Charles 推荐指数:★★☆☆☆

Charles 是一款强大的抓包工具,可以截取包括 https 在内的各种网络请求并方便的查看具体信息。有 Mac、Windows 和 Linux多版本,通过配置 WIFI 代理,也可以拦截手机发出的请求。毕竟前端相当一部分报错是网络错误或数据不符合预期导致的(甩锅后端)。所以通过拦截 http 请求,查看具体的请求信息和数据,能获取很多有用的信息,可以在一定程度上帮助 debug。但是该软件是付费的(希望大家支持正版,要记住你也是一位开发),而且它定位不了 js 的报错,所以只能作为一个辅助工具。至于使用方法,网上很多介绍—— 此处一枚。

3. weinre 推荐指数:★★★☆☆

weinre是一款很不错的网页检查工具,可以通过在本地启动一个 weinre 服务,并向手机网页嵌入一段 js 脚本来实现和电脑的通信,已达到类似浏览器开发工具那样的的调试效果,它的操作界面和 vConsole 差不多,主要包括查看 DOM、Console、Network 等,只不过这一切是在电脑上操作,而不是在手机上。微信web开发者工具的移动调试也是借助于此。附上一篇简单的使用介绍。因为我的 js 早就原地爆炸,它和 vConsole 一样,并没有帮到我什么。

4. Mac + IOS + Safari 推荐指数:★★★★☆

如果你手上有一台 Mac 电脑和一部苹果手机,那么恭喜你,你离解决 bug 只差我这一篇博客了。(手动滑稽)

第一步:打开苹果手机 设置 > Safari浏览器 > 高级 > Web检查器

第二步: 打开 Mac 上的 Safari浏览器 > 偏好设置 > 高级 > 在菜单栏中显示“开发”菜单

第三步: 用数据线连接你的 Mac 电脑和苹果手机,并选择信任设备。然后在手机的 Safari浏览器 中打开你需要调试的页面,并在电脑上点击下图红框的位置。

第四步:点击之后就会出现如下图所示的,几乎和电脑一样的调试界面,怎么操作,我想各位大佬也不用我多啰嗦了吧!我就是通过这种方式发现 js 的报错,并成功解决问题,赢得小姐姐认可的。

5. Chrome浏览器 + Android 推荐指数:★★★★★

很多小伙伴可能不使用 Mac 或者不习惯 Safari浏览器 的开发者工具,没关系,谷歌也有类似的工具,而且更符合大家的使用习惯。有梯子的小伙伴,可以直接看谷歌官方文档。

第一步:打开 Android 手机 设置 > 开发者选项 > USB调试。设置里面没有 开发者选项 的,自行百度。

第二步:通过数据线连接你的电脑和 Android 手机,会弹出如下界面,点击 确定。

第三步:给你的 Android 手机下载一个手机版的 Chrome浏览器 (各大应用商店自行搜索),并在手机上的 Chrome浏览器 中打开你需要调试的页面。

第四步:打开你电脑上的 Chrome浏览器 ,按下图标注顺序,依次点开。我使用的是 小米5,你可以看到左侧有 MI 5 已连接的字样。划线的地方分别是手机上 Chrome浏览器 和自带浏览器 WebView 下打开的页面。

第五步: 每个页面右侧都有一个 Inspect 检查的按钮,点击就会出现你熟悉的画面,后面就不用解释了吧!走你。

公司的小伙告诉我,这种方法他需要爬梯子才能用,爬不上去的小伙伴可以关注我,我后面计划出一篇介绍如何自己搭梯子的博客。


总结

工欲善其事必先利其器,没有好的调试工具或方法,移动端真机下的 debug 简直是前端的噩梦。但是有了这些好用的方法,我想各位优秀的前端兄弟们,帮妹子修复个小 bug 还是 so easy 的!

链接: https://www.fly63.com/article/detial/6534

常用的前端开发者的工具、库和资源

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。

web前端程序员代码编辑器推荐

今天给大家分享前端程序员最爱用的代码编辑器,来看看你用哪款?包括:Visual Studio Code、Atom、HBuilder、Sublime Text、Dreamweaver、Brackets、Notepad++

JavaScript常用工具方法封装

Js常用工具方法封装:type 类型判断、Date、Array、String 字符串操作、Number、Http、DOM、Other 其它操作

Node.js 命令行工具的编写

日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段

一百行js代码实现一个校验工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少if else等不可维护的代码。因此,我觉得一个团队或者是一个项目

Licia 支持小程序的 JS 工具库

Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。

程序员常用命令行工具

WordGrinder它是一款使用起来很简单,但拥有足够的编写和发布功能的文字编辑器。Proselint:它是一款全能的实时检查工具。GNU Aspell:

Web前端开发工程师常用的工具!

工欲善其身必先利器,作为前端行业的你,如果知道一些好用的软件工具可以帮助他们更好的工作。下面,就给大家分享Web前端开发工程师常用的工具。

用100行代码,完成自己的前端构建工具!

ES2017+,你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具,可以脑海中永远划掉。100行代码,你将透视构建工具的本质。

欺骗技术13款开源工具分享

一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!