web 开发利器-演道网

web 开发 2 年半了,作为一个工具控,是时候秀出我的 瑞士军刀 了。下面的内容偏实用,来自工作生活中的积累 ^_^ 。

todo:持续更新中,如果发现更多 web 开发的黑科技,会慢慢添加到这里。

chrome

快捷键

常用功能:

  • C-r 重新加载页面
  • C-u 查看 html 源码
  • C-S-i 审查元素,下面会讲到
  • f12 调起开发者工具栏

还有一个常用功能:隐私模式,避免调试的时候因为 js、css 缓存引起的问题

开发者工具栏

  • 总览

  • elements

截图中元素是折叠起来的,使用 C-S-i 审查元素 时会自动跳转此界面的相应代码处

  • console

此处可以查看到页面的 js 报错,并运行、调试 js 代码,常用 console.log('xxx') 添加的调试信息,就是显示在这里

  • network

页面发起的网络请求都再这里啦

  • network – detail

关于一次请求的细节基本都在这里啦,但是这里有一个坑,部分 http 返回在这里无法预览,这也是为什么要用到 firefox + firebug

  • resources

firefox + firebug

firefox 确实很强,不过我除了用来调试兼容之外,基本只用来调试 部分 http 返回在 chrome 无法预览 的情况

fiddler

界面简介

调试 app 的 api 接口

如果移动设备和电脑的网络在同一个网络下(一般公司和家里都是这样吧),就可以通过下面的设置开启调试啦

fiddler 设置:菜单 -》Tools -》fiddler options -》Connections -》 Allow remote computers to connect + 端口(默认的 8080 就行了)
手机 WiFi 设置:WiFi 设置 -》proxy -》改为手动设置,填写 fiddler 所在电脑的内网 ip 上面配置的端口;手机第一次连接的时候,需要安装一个 证书(应该是证书吧?)

模拟请求

重发 + 过滤

重发:

  • 有没有遇到这样的场景:要调试一个地方,但是这个地方要跳转几个页面才能到;或者这个请求要填写一些数据才行
  • 请求 -》右键 -》repaly -》 各种姿势,看你需求啦

过滤:

  • 刚开始用的时候,是不是被 fiddler 左侧不停滚动的列表吓到了,别怕,我们有过滤功能
  • 过滤功能很简单:过滤指定域名 www.baidu.com;模糊匹配 *.baidu.com;多个域名 www.baidu.com,mail.qq.com

写在最后

工具的终极目标,就是为了提升效率,上面提到的任一工具,几乎都只用到一二而已,但是 那有怎样,一招半式闯天涯

提供一份 web 开发学习指南:

  • 推荐阅读《http权威指南》,了解更多 http 的细节
  • 了解 tcp/ip 4层网络模型,这是网络基础知识
  • w3cschool:web 开发基础手册,你不一定要做到全栈,但是前后端的基础还是要了解的

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

发表评论

电子邮件地址不会被公开。 必填项已用*标注