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 开发基础手册，你不一定要做到全栈，但是前后端的基础还是要了解的