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

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

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

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资源:

参考列表

下期预告

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

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

推荐阅读更多精彩内容