调试的魅力-web篇.pdf

调试的魅力-web篇 前言 ：调试技巧，在任何一项技术研发中都可谓是必不可 的技能。掌握各种调试技巧，必定 能在工作中起到事半功倍的效果。譬如，快速定位问题、降低故障概率、帮助分析逻辑错误等 等。而在互联网前端开发越来越重要的今天，如何在前端开发中降低开发成本，提升工作效 率，掌握前端开发调试技巧尤为重要。 ps:本文主讲JS debug （css与html标签非常简单，可F12直接查看，遂不作讲解） 1.JS调试发展历程: 浏览器发展史这里不作过多描述，从IE6开始，因JS 调试功能还非常弱，JavaScript debug 方式主要以内置于Window对象中 alert为主，专业点 可能会使用Internet Explorer Developer Toolbar等类似插件，但是无可否认 是它不可磨灭 价值，甚至到 今天，已然有其用武之地。 直到后来新一代调试王者Console，相对比alert，它的好处是，不会阻断页面的继续渲染， 界面也更加友好，就算不删除也并不影响功能，所以，新一代的浏览器Firefox、Chrome， 包括IE，都相继推出了JS调试控制台，支持使用类似”console.log(xxxx)”的形式，在控制台 打印调试信息，而不直接影响页面显示，而以Chrome浏览器为首的后起之秀，为Console扩 展了更丰富的功能。 JS断点调试也是随着前端发展，顺势而生，JS断点调试，即是在浏览器开发者工具中为JS代 码添加断点，让JS执行到某一特定位置停住，方便开发者对该处代码段的分析与逻辑处理。 远程映射本地调试 ：当线上某个j s/css出现问题，我们可以用代理 方式，将远程 文件代 理到本地来实现远程映射调试。其实除了这个功能，还可以作为抓包工具，这在移动端是很重 要 。如windows工具fiddler等 ； 随着手机行业的快速发展，移动端调试也应运而生，如chome的 Inspect(chrome://inspect/#devices)、在线的 hlConsole （）、Weinre移动调试等工具 ； （备 用:/huowu_GameCenter_version/V 1.1.30/dist/index.html#! /comment） Review ： ① ：alert(xxx) ； ② ：console.log(xxxx) ； ③ ：通过浏览器Sources对JS文件进行断点调试 ④ ：debugger 断点 ； ⑤ ：远程映射本地调试 （fiddler） ； ⑥ ：移动端debug （chome的Inspect、hlConsole、Weinre） 前端chrome浏览器调试总 结/gl0ry/article/details/539 15199 其他移动端调试工具 为什么要使用它们， 1.chrome模拟器上运行正常，手机webview上出现异常 2.我的手机上运行正常，你的手机上出现异常， 因为兼容性出现的问题，就需要借助移动端调试工具 1.通过Chrome inspect对手机webview进行调试 前置条件 ： 1、PC （MAC\WINDOWS\LINUX）上安装Chrome 3 1或以上版本，一般我们都用最新版 啦。 2、如果是Windows，需先安装USB设备驱动程序，用来连接安卓移动手机或PAD，对于 MAC、LINUX则已安装好。 （Windows上可安装碗豆夹或手机助手，用USB连接线接上手 机后，会 自动检测并安装相应的US B设备驱动程序） 3、成功进行翻--墙，能在Chrome打开即可。 连接设备 ： 1. 使用usb将手机的PC相连接 ； 2. 手机设置启动开发者模式并开启USB调试模式 3. 在chrome地址栏中输入chrome://inspect/#devices 选中discover usb devices。可以 看到我们的手机设备，如下图所示: 此时可以在手机上打开我们需要调试的页面，chrome也会同步显示需要调试的页面 点击inspect进入调试页面 熟悉的F12界面出现了，开始进行调试吧 总结 ：熟悉的调试的界面，功能强大，调试不支持微信浏览器。 2.通过Chrome的inspect对手机webview进行调试 hlConsole，是一款网页版的Console，可以方便的看到手机网