菜鸟笔记(七) - 网页调试的相关技巧

本文将介绍使用网页调试的一些小技巧和工具。

前提摘要：笔者非专业的前端工程师，但也涉足全栈多年。本篇文章主要分享一些调试开发相关的工具和技巧（笔者的喜好）,但不涉及推荐什么前端框架.

Web开发实践

必备利器 - Firefox + firebug

• 选中Html Element 并编辑它，实时预览效果.

  
  
  

  css.png

• 查看CSS，修改CSS样式，并实时预览效果

css1.png

• 网络请求速度查看

download.png

这一点非常有用，可以帮助你分析网站的主要延迟的来源。

• 异步请求查看

AJAX.png

Tip:在调试rest请求的时候，可以使用此网络请求查看包括Post的参数，响应，Header等，非常实用。

• JS执行调试

debug.png

• Xpath,对于写爬虫的人来说，xpath是一种有效的解析网页元素的方式，firebug提供简单的$x(exp)方法去测试Xpath语句，非常的方便。

xpath.png

xpath1.png

• 其它功能，请到[^1]Firebug Wiki查看文档。

Mobile Web开发实践

必备利器 - Chrome

Tip 不要问我为什么这里又要用Chrome，因为笔者有多浏览器综合症，其实是Chrome的mobile 预览功能比较强大。其实Firebug有的功能，Chrome 的开发者工具基本都有[手动滑稽]。

chrome-mobile.png

Ngrok - 服务实现内网穿透

一般Mobile Web我们需要在手机端访问，本地的localhost:8080，除了局域网使用Ip访问外，局限性很大，而Ngrok可以将你本地的localhost:8080 映射到外网如 cnbj.tunnel.jiying.mobi:80，注意这里的端口是80，这对于微信公众号开放简直就是福音，因为你懂的，微信只接受80端口。

WEB&API调试同样也是利器:

dash.png

一些国内的Ngrok资源：

• http://www.ngrok.cc/
• http://blog.phpor.me/tools/2015/11/04/share-ngrok.html
• 向笔者(关注我,私信我)索取笔者自建的ngrok服务.

参考列表

• [^1]Firebug Wiki
• Firebug 安装地址
• 搭建 ngrok 服务实现内网穿透

下期预告

下期预告:Java正则表达式。

欢迎大家关注我的，或者在文章下方 邮件订阅。菜鸟笔记 周更两篇技术文章