个人认为谷歌浏览器堪称开发神器,你们觉得呢? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Get Google Chrome
Vimium 在 Chrome 里使用 vim 快捷键
heylogo
V2EX    Chrome

个人认为谷歌浏览器堪称开发神器,你们觉得呢?

  •  
  •   heylogo 2015-09-15 17:43:59 +08:00 4732 次点击
    这是一个创建于 3759 天前的主题,其中的信息可能已经有所发展或是发生改变。
    极其便捷的源码跟踪查看、精确到像素的标尺、适用不同设备页面开发的 UA 模拟,等等等等

    再看 IE ,简直就是个渣。
    47 条回复    2015-09-17 17:38:24 +08:00
    xfspace
        1
    xfspace  
       2015-09-15 17:48:10 +08:00 via Android
    你没看 Edge...
    wesley
        2
    wesley  
       2015-09-15 18:12:20 +08:00
    网络连接和控制台不如 Firefox 上的 firebug
    pyKun
        3
    pyKun  
       2015-09-15 18:14:46 +08:00
    vim 吧...
    hooluupog
        4
    hooluupog  
       2015-09-15 18:18:18 +08:00
    chrome
    vim
    google
    这三样,开发时都是常开的。
    drush
        5
    drush  
       2015-09-15 18:18:32 +08:00
    @wesley 也是我一直在用 firefox 的原因之一
    Smirnoff
        6
    Smirnoff  
       2015-09-15 18:22:24 +08:00
    看什么 IE ,你没看 Edge,你搞开发的用什么老的系统你愿谁。。。。。
    sandideas
        7
    sandideas  
       2015-09-15 18:23:38 +08:00
    firefox 有话说。
    iamppz
        8
    iamppz  
       2015-09-15 18:26:18 +08:00 via iPhone
    电脑上的 chrome 就是调试专用的,平时是 ff 和 edge
    zeacev
        9
    zeacev  
       2015-09-15 18:26:57 +08:00
    从前端来说,我用过的最好的浏览器就是 Chrome ,没有之一。最喜欢的一点就是可以模拟各种手机 UA 各种分辨率
    66beta
        10
    66beta  
       2015-09-15 18:30:41 +08:00
    edge 的 dev tools 不能在同窗口,差评
    raincious
        11
    raincious  
       2015-09-15 18:33:34 +08:00
    @sandideas

    如果你不提 Firebug 的话……

    其实我今天都找不到 Firefox 开发控制台里清除 SessionStorage 和 LocalStorage 的方法。当然,那是除了控制台敲命令之外。
    Slienc7
        12
    Slienc7  
       2015-09-15 18:40:37 +08:00
    然而你只用过 IE 和 Chrome 吧。。。 - -
    ffffwh
        13
    ffffwh  
       2015-09-15 19:08:06 +08:00 via Android
    为啥我觉得 safari 的顺手一点。。
    sandideas
        14
    sandideas  
       2015-09-15 19:10:54 +08:00
    @raincious 当然说的是 Firebug 了。
    lonelygo
        15
    lonelygo  
       2015-09-15 19:13:26 +08:00
    既然这样,我就问一个弱智点的问题: IE 的 httpwacth ,在 Chrome 、 safari 、 firefox 下有啥同类
    ljbha007
        16
    ljbha007  
       2015-09-15 19:14:23 +08:00
    @wesley
    firebug 的网络监控和控制台好在哪里?
    Chrome 的控制台现在连 []取属性都可以提示了
    网络请求所有时间长短、内容、请求头都可以看到 连 websocket 都有调试信息
    ljbha007
        17
    ljbha007  
       2015-09-15 19:18:33 +08:00
    http://tutorialzine.com/2015/03/15-must-know-chrome-devtools-tips-tricks/

    给你们推荐这个文章 讲了很多调试时候有用的技巧
    还有一个我知道的 文中没提的
    控制台$0 变量是指向当前选中的节点
    ljbha007
        18
    ljbha007  
       2015-09-15 19:19:38 +08:00
    @lonelygo
    chrome 自带 不但可以调 http 还可以调 websocket
    heylogo
        19
    heylogo  
    OP
       2015-09-15 19:22:08 +08:00 via iPhone
    @xgowex 然也
    ljbha007
        20
    ljbha007  
       2015-09-15 19:24:52 +08:00
    还有一个最近研究 React 发现的最的功能 目前没有在别的调试工具上看到过

    Dom 元素或属性更新时 对应的文字背景颜色会变成紫色闪一下 这个在调试 React 性能的时候格外有用 立马就知道哪些元素更新了 哪些没有更新 哪些不该更新的更新了 很快就能找到问题节点
    还有一个技巧就是 可以在页面上重绘的地方 出来个绿色的方框 那些地方重绘了一清二楚
    ljbha007
        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
    ljbha007
        22
    ljbha007   div class="badges">   2015-09-15 19:36:10 +08:00
    @wesley
    我专门去看了下 firebug 你可以去仔细看看 chrome 的工具 firebug 有的 chrome 也很早以前就有了 而且网络数据显示得更详细 连 gzip 压缩前大小、解压缩时间等都统计出来 并且有图表显示 甚至连哪一行代码发起的请求都能追踪到
    还有 Chrome 可以追踪动画运行时的帧率等等 我以前也一直用的 firebug 因为 firefox 字体不好看的原因换了 chrome 之后发现没什么不一样 后来渐渐积累了一些经验和技巧才发现 chrome 的调试工具太牛逼了!!
    loading
        23
    loading  
       2015-09-15 20:05:43 +08:00 via Android
    firefox 的调试实在不适应,专门装了个 chrome ,而用户都是 firefox …
    heylogo
        24
    heylogo  
    OP
       2015-09-15 21:16:36 +08:00
    @loading 你可能专业方面的不适应,我是对 firefox 的 UI 不适应,感觉过于锐利,用起来心里总觉得咯得慌。

    不知道我说明白没 ==
    heylogo
        25
    heylogo  
    OP
       2015-09-15 21:19:45 +08:00
    @ljbha007 哈哈 我只是作为互联网爱好者凭使用感觉说的,不像你们这么专业。
    jydeng
        26
    jydeng  
       2015-09-15 21:28:17 +08:00
    chrome 和 firefox 圣战打响。
    ljbha007
        27
    ljbha007  
       2015-09-15 21:37:48 +08:00
    @heylogo firefox 以前字体之难看 中文字体在 linux 下大的大小的小 都没对齐 强迫症看到就想万蚁噬心
    heylogo
        28
    heylogo  
    OP
       2015-09-15 21:40:05 +08:00
    @jydeng 无意引战,只是觉得谷歌用起来真是方便且强大

    <img src="http://i1.tietuku.com/78425891425aa40b.png">
    heylogo
        29
    heylogo  
    OP
       2015-09-15 21:40:58 +08:00
    mocxe2v
        30
    mocxe2v  
       2015-09-15 21:42:09 +08:00
    XDebug,Fiddler,Firebug,用过的三个开发工具,不知道 Javascript 怎么调试?
    GG668v26Fd55CP5W
        31
    GG668v26Fd55CP5W  
       2015-09-15 21:52:10 +08:00 via iPhone
    用 Firebug ,因为 FirePHP ,逃
    YuJianrong
        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 了。
    oott123
        33
    oott123  
       2015-09-15 22:30:02 +08:00
    装了个 Chrome ,只为了偶尔调试下复杂点的网页或者手机网页啥的。
    Dev Tools 确实好用,但个人是实在不想用 Chrome 进行日常的网页浏览,扩展功能不太够用……
    而且很多 webkit only 的属性呀,用起来就像是用 IE6 时代的 IE6 一样。
    平常还是用 Firefox 。
    aisin
        34
    aisin  
       2015-09-15 23:05:26 +08:00
    以前一直用 firefox 的 firebug ,现在移动开发越来越多,渐渐喜欢上了 chrome 的开发工具
    heylogo
        35
    heylogo  
    OP
       2015-09-15 23:10:05 +08:00 via iPhone
    @aisin 谷歌的移动开发真的很赞,谁用谁知道
    TakanashiAzusa
        36
    TakanashiAzusa  
       2015-09-15 23:24:36 +08:00 via Android
    我把 chrome 当半个 ide 用。。 workspace 即时更新本地 css ,可见可得虽然这样好像抑制了手写代码的能力
    loading
        37
    loading  
       2015-09-16 05:47:59 +08:00 via Android
    @heylogo 我也是 ui 上的不适应,有些地方要找很旧,我调试是从 chrome 起步的,也许是先入为主。
    Mavious
        38
    Mavious  
       2015-09-16 07:00:03 +08:00 via Android
    说 ffox 字体难看的,不会写 css 强制调用字体啊!
    配个 mactype ,爽爆了。
    joyee
        39
    joyee  
       2015-09-16 10:27:41 +08:00
    @ljbha007 这大概不是浏览器的锅,是设置 /字体的锅……
    joyee
        40
    joyee  
       2015-09-16 10:35:36 +08:00
    个人感觉各家浏览器的开发者工具都有自己的特色,都有其他家不能取代的点……不过论综合的话, Chrome 显然是整体来说最好的,还有很多实验功能 /要加命令行参数才能打开的功能,开了更黑魔法。

    话说要比较就拿 Chrome Canary 和 Firefox Developer Edition 啊 Edge 啊这样的来比较啊不然耍流氓啊……而且 Chrome 的 devtools 最好先把官方那个 guide 看一遍会知道很多 trick ,没必要东奔西走文档里应有尽有……
    ljbha007
        41
    ljbha007  
       2015-09-16 10:40:36 +08:00
    @joyee 默认字体就这样啊
    ljbha007
        42
    ljbha007  
       2015-09-16 10:43:07 +08:00
    @heylogo 我们公司用 Ionic 开发的 大部分时间我都用 chrome 调 不用真机调 用真机调也可以用 Chrome dev tools
    joyee
        43
    joyee  
       2015-09-16 10:52:20 +08:00
    @ljbha007 字体是什么?
    iyagyuan
        44
    iyangyuan  
       2015-09-16 15:51:50 +08:00 via iPhone
    没觉得 firebug 哪里比谷歌 f12 好用
    ljbha007
        45
    ljbha007  
       2015-09-16 19:35:59 +08:00
    @joyee 很早以前 ubuntu 10.04 装上火狐默认的字体 记不清了
    joyee
        46
    joyee  
       2015-09-16 19:57:47 +08:00
    @ljbha007 听你的描述很有可能是简繁体的设定不对导致字符集不全然后有些是点阵宋有些是黑体(或者 fallback 到其他字体)的那种情形,所以大小不齐。更新到比较新版的字体比如文泉驿微米黑然后指定好大概就没问题了,或者直接更新系统顺带更新字体?我以前也见过有人 mac 上的 Chrome 出现过这种情况,主要是 fallback 出了问题,指定一下字体就好了。
    hzgmaxwell
        47
    hzgmaxwell  
       2015-09-17 17:38:24 +08:00
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2928 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 26ms UTC 13:40 PVG 21:40 LAX 05:40 JFK 08:40
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86