本文将介绍使用网页调试的一些小技巧和工具。
前提摘要：笔者非专业的前端工程师，但也涉足全栈多年。本篇文章主要分享一些调试开发相关的工具和技巧（笔者的喜好）,但不涉及推荐什么前端框架.
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服务.
参考列表
下期预告
下期预告:Java正则表达式。
欢迎大家关注我的简书，或者在文章下方 邮件订阅。菜鸟笔记 周更两篇技术文章
网友评论