这是一个创建于 3375 天前的主题，其中的信息可能已经有所发展或是发生改变。
极其便捷的源码跟踪查看、精确到像素的标尺、适用不同设备页面开发的 UA 模拟，等等等等
再看 IE ，简直就是个渣。
再看 IE ，简直就是个渣。
 |
1
xfspace 2015-09-15 17:48:10 +08:00 via Android
你没看 Edge...
|
 |
2
wesley 2015-09-15 18:12:20 +08:00
网络连接和控制台不如 Firefox 上的 firebug
|
 |
3
pyKun 2015-09-15 18:14:46 +08:00
vim 吧...
|
 |
4
hooluupog 2015-09-15 18:18:18 +08:00
chrome
vim 这三样，开发时都是常开的。 |
 |
6
Smirnoff 2015-09-15 18:22:24 +08:00
看什么 IE ,你没看 Edge,你搞开发的用什么老的系统你愿谁。。。。。
|
 |
7
sandideas 2015-09-15 18:23:38 +08:00
firefox 有话说。
|
 |
8
iamppz 2015-09-15 18:26:18 +08:00 via iPhone
电脑上的 chrome 就是调试专用的，平时是 ff 和 edge
|
 |
9
zeacev 2015-09-15 18:26:57 +08:00
从前端来说，我用过的最好的浏览器就是 Chrome ，没有之一。最喜欢的一点就是可以模拟各种手机 UA 各种分辨率
|
 |
10
66beta 2015-09-15 18:30:41 +08:00
edge 的 dev tools 不能在同窗口，差评
|
 |
11
raincious 2015-09-15 18:33:34 +08:00
@sandideas
如果你不提 Firebug 的话…… 其实我今天都找不到 Firefox 开发控制台里清除 SessionStorage 和 LocalStorage 的方法。当然，那是除了控制台敲命令之外。 |
 |
12
Slienc7 2015-09-15 18:40:37 +08:00
然而你只用过 IE 和 Chrome 吧。。。 - -
|
 |
13
ffffwh 2015-09-15 19:08:06 +08:00 via Android
为啥我觉得 safari 的顺手一点。。
|
 |
15
lonelygo 2015-09-15 19:13:26 +08:00
既然这样，我就问一个弱智点的问题： IE 的 httpwacth ，在 Chrome 、 safari 、 firefox 下有啥同类
|
 |
16
ljbha007 2015-09-15 19:14:23 +08:00
|
|
17
ljbha007 2015-09-15 19:18:33 +08:00
http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/
给你们推荐这个文章 讲了很多调试时候有用的技巧 还有一个我知道的 文中没提的 控制台$0 变量是指向当前选中的节点 |
|
20
ljbha007 2015-09-15 19:24:52 +08:00
还有一个最近研究 React 发现的最屌的功能 目前没有在别的调试工具上看到过
Dom 元素或属性更新时 对应的文字背景颜色会变成紫色闪一下 这个在调试 React 性能的时候格外有用 立马就知道哪些元素更新了 哪些没有更新 哪些不该更新的更新了 很快就能找到问题节点 还有一个技巧就是 可以在页面上重绘的地方 出来个绿色的方框 那些地方重绘了一清二楚 |
|
21
ljbha007 2015-09-15 19:27:58 +08:00  1
Chrome Dev tools 还可以把网络文件和本地文件进行关联 在浏览器里调试时的修改可以直接保存到本地对应的文件 非常方便
http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools 这里还有一篇讲得更详细的 ppt 不过很老了 又出了很多新功能 https://www.igvita.com/slides/2012/devtools-tips-and-tricks |
|
22
ljbha007 2015-09-15 19:36:10 +08:00
@wesley
我专门去看了下 firebug 你可以去仔细看看 chrome 的工具 firebug 有的 chrome 也很早以前就有了 而且网络数据显示得更详细 连 gzip 压缩前大小、解压缩时间等都统计出来 并且有图表显示 甚至连哪一行代码发起的请求都能追踪到 还有 Chrome 可以追踪动画运行时的帧率等等 我以前也一直用的 firebug 因为 firefox 字体不好看的原因换了 chrome 之后发现没什么不一样 后来渐渐积累了一些经验和技巧才发现 chrome 的调试工具太牛逼了！！ |
 |
23
loading 2015-09-15 20:05:43 +08:00 via Android
firefox 的调试实在不适应，专门装了个 chrome ，而用户都是 firefox …
|
 |
24
heylogo OP |
 |
26
jydeng 2015-09-15 21:28:17 +08:00
chrome 和 firefox 圣战打响。
|
|
27
ljbha007 2015-09-15 21:37:48 +08:00
@heylogo firefox 以前字体之难看 中文字体在 linux 下大的大小的小 都没对齐 强迫症看到就想万蚁噬心
|
|
28
heylogo OP |
|
29
heylogo OP |
 |
30
mocxe2v 2015-09-15 21:42:09 +08:00
XDebug,Fiddler,Firebug,用过的三个开发工具，不知道 JavaScript 怎么调试？
|
 |
31
falcon05 2015-09-15 21:52:10 +08:00 via iPhone
用 Firebug ，因为 FirePHP ，逃
|
 |
32
YuJianrong 2015-09-15 22:04:03 +08:00
没有见过比 chrome devtools 更强的 web 开发工具。
控制台： chome 的是光标从上往下而不是 FF/IE 那样一小条，个人觉得好用很多 调试器：超级强大，文件可以按目录排而不是 FF 那样所有文件放一起，这对于我们一个项目超 1k 个 JS 由文件夹分模块来说是杀手级的。然后断点有 JS 断点、 dom 断点、事件断点和 XHR 断点，几乎能调试任何问题。最可怕的是几个版本前还增加了异步 call stack （据我所知没有任何其他调试器包括其他语言的调试器实现了这个功能），虽然实际应用场景不是很多不过用于调试一些疑难 bug 还是有用的。 profiller: 能记录 JS 函数调用和 heap allocation snapshot ，分析内存泄露神器 time line ：记录整个 render 过程的 JS 和 render 调用，能对 render 进行逐步分析（不是很好用），还有 canvas 断点用于调试 Canvas 应用（没用过） 说实话我相信 chrome devtools 这个先进程度在这个星球上其他浏览器在数年内是赶不上了（而且 chrome 还在快速演进，不要说赶上现在连不被抛离都有难度啊）。 备注：本人是曾经的 Firefox 粉，不过开始大规模开发 HTML 后就投入 chrome 了。 |
 |
33
oott123 2015-09-15 22:30:02 +08:00
装了个 Chrome ，只为了偶尔调试下复杂点的网页或者手机网页啥的。
Dev Tools 确实好用，但个人是实在不想用 Chrome 进行日常的网页浏览，扩展功能不太够用…… 而且很多 webkit only 的属性呀，用起来就像是用 IE6 时代的 IE6 一样。 平常还是用 Firefox 。 |
 |
34
aisin 2015-09-15 23:05:26 +08:00
以前一直用 firefox 的 firebug ，现在移动开发越来越多，渐渐喜欢上了 chrome 的开发工具
|
 |
36
TakanashiAzusa 2015-09-15 23:24:36 +08:00 via Android
我把 chrome 当半个 ide 用。。 workspace 即时更新本地 css ，可见可得——虽然这样好像抑制了手写代码的能力
|
|
37
loading 2015-09-16 05:47:59 +08:00 via Android
@heylogo 我也是 ui 上的不适应，有些地方要找很旧，我调试是从 chrome 起步的，也许是先入为主。
|
 |
38
Mavious 2015-09-16 07:00:03 +08:00 via Android
说 ffox 字体难看的，不会写 css 强制调用字体啊！
配个 mactype ，爽爆了。 |
 |
40
joyee 2015-09-16 10:35:36 +08:00
个人感觉各家浏览器的开发者工具都有自己的特色，都有其他家不能取代的点……不过论综合的话， Chrome 显然是整体来说最好的，还有很多实验功能 /要加命令行参数才能打开的功能，开了更黑魔法。
话说要比较就拿 Chrome Canary 和 Firefox Developer Edition 啊 Edge 啊这样的来比较啊不然耍流氓啊……而且 Chrome 的 devtools 最好先把官方那个 guide 看一遍会知道很多 trick ，没必要东奔西走文档里应有尽有…… |
|
42
ljbha007 2015-09-16 10:43:07 +08:00
@heylogo 我们公司用 Ionic 开发的 大部分时间我都用 chrome 调 不用真机调 用真机调也可以用 Chrome dev tools
|
 |
44
iyangyuan 2015-09-16 15:51:50 +08:00 via iPhone
没觉得 firebug 哪里比谷歌 f12 好用
|
|
46
joyee 2015-09-16 19:57:47 +08:00
@ljbha007 听你的描述很有可能是简繁体的设定不对导致字符集不全然后有些是点阵宋有些是黑体（或者 fallback 到其他字体）的那种情形，所以大小不齐。更新到比较新版的字体比如文泉驿微米黑然后指定好大概就没问题了，或者直接更新系统顺带更新字体？我以前也见过有人 mac 上的 Chrome 出现过这种情况，主要是 fallback 出了问题，指定一下字体就好了。
|
 |
47
hzgmaxwell 2015-09-17 17:38:24 +08:00
|
Select Language