chrome的几个网站开发功能

axiu 撰写于 2009/11/26 | 40 条评论

看到很多人不用chrome,感觉很奇怪,这个浏览器不好用?还是大家习惯了FF或者IE?我觉得Google推出这么个浏览器,肯定有它的道理,如果仅仅因为体积小,那卖点有点太单纯了。其实chrome的用处很多,尤其是对于那些喜欢改写东西的同学,chrome有它可取的功能,而且一直让我很受用。

1、修改网页CSS

css很麻烦,尤其是当你是门外汉又急切想让自己的主题与众不同的时候。用chrome吧。它提供了一些常用的功能,例如CSS重写、样式预览、审查CSS错误等。

①css重写

我的意思是说,你想修改网页个别部分的CSS,却又不知道从哪里下手的时候。用chrome可以方便地找到。下面举个例子:
我的主页中文章下面的 continue 为例~~右键点击continue,审查元素,之后会出现以下对话框:

其中1是你想修改的元素,2是元素的代码,3就是元素所在的文件(请看准确位置)。这样当你想修改css的时候,可以直接在3里面对应的白色处双击,变成可以修改的框框之后就输入吧。比如我修改成下面的样式:

(分别加入了background-color:red;/display:block;/height:35px;width:100px;)

②CSS预览

只要进行了元素的修改,再点击屏幕任意位置,就可以即时显示你修改之后的效果。根据效果修改相应文件内容,即可完成。

2、检查载入速度/影响网页速度的原因

用chrome查看网页速度其实很方便,我做了个例子:

其中左边的Time可以查看载入时间,下面的size可以查看载入元素的大小。再往下的红色黄色圆圈是警告或错误。

3、查看JS代码

可能都有这样的经历,看到一个特别好的网页特效,特别想用到自己的网站上。怎么办呢?用chrome。它提供的功能可以让你方便地查看JS代码。但是,请不要恶意抄袭别人的代码。我这里只是介绍它的功能。
只要点击右键审查元素里面的第三项,scripts,就可以显示网站所用的所有JS代码,例如下面是我博客上的jquery.min.js的全部代码:

所以,下次遇到好的效果而且很困惑的时候,就可以用它来解决了。很简单吧?
chrome的其他功能我还没有用到,这个浏览器不只是小巧而已,功能更是不像看起来那么简单。怎么样,一起尝试一下吧~~

评论:39

  1. A.shun A.shun 09/11/26

    这个应该叫“chrome的开发者工具介绍” :arrow:

  2. hfantasy hfantasy 09/11/27

    :roll: 一般人谁没事去修改css啊~汗死~ :shock:

    • axiu axiu 09/11/28

      我啊,我就经常改……

    • hfantasy hfantasy 09/11/29

      @阿修 :mad: 者不正好证明你不是一般人么~ :shock: 当然我没说是怪物~ :mrgreen:

    • axiu axiu 09/11/29

      @hfantasy 哈哈,谢谢~~

  3. FORECE FORECE 09/11/27

    文盲路过

  4. Awu Awu 09/11/27

    有用,我喜欢用chrome

  5. 万戈 万戈 09/11/27

    我还是习惯用FF调试网页

    • axiu axiu 09/11/28

      改的很不错啊~!有时间介绍点经验 :wink:

  6. Always.Life Always.Life 09/11/27

    首先要说的,代码抄袭没什么不好,学习嘛
    其次,虽然我安装了chrome,用的还真是少,如同你说的,用惯了,什么浏览器也没什么所谓了

    • axiu axiu 09/11/28

      学习的话欢迎~~
      是啊,只要习惯,什么浏览器都无所谓了

  7. zwwooooo zwwooooo 09/11/27

    我有时用,但我喜欢chrome

    • axiu axiu 09/11/28

      以前用FF,但是现在win7下很卡,不知道怎么回事……

    • zwwooooo zwwooooo 09/11/28

      @阿修 没用过W7,所以不知道,哈

  8. mz mz 09/11/27

    :arrow: 当初就是因为chrome的查看源代码的字体特别小而抛弃掉chrome的。到了后来发现还是FF+FIREBUG好使,特别是自己越改越多的情况下。
    最后chrome吸引我的只剩UI了,没想到FF的主题迅速跟进,好了,chrome彻底从我的APT里拜拜了

    • axiu axiu 09/11/28

      哈哈,等我找到稳定速度快的FF版本就试试~~

    • mz mz 09/12/03

      @阿修 :arrow: 我在最后还是倒向了你的主题,努力实现中,一栏感觉比较乱

  9. 笑话 笑话 09/11/28

    觉得还是FF已经蛮好使的,FIREBUG就够用了~~~

    • axiu axiu 09/11/28

      我的win7不知道怎么用FF很卡~~所以没怎么用过它~倒是chrome很有速度

  10. muxiaku muxiaku 09/11/30

    我还是习惯IE…

    • axiu axiu 09/12/03

      希望不是IE6&7……

  11. 这么说来谷歌浏览器还挺厉害的。 不过我用惯了IE和FF。就不换啦。

    • axiu axiu 09/12/03

      只要自己习惯就好

  12. 夏影残雪 夏影残雪 09/12/01

    :wink: 我是支持用chrome滴~~~~

    FF在校园网络内毫无用武之地,最好还是chrome了~~~~
    chrome防木马也不错滴~

    • axiu axiu 09/12/03

      哈,我喜欢它的简洁~

  13. Tangboke Tangboke 09/12/03

    这些功能都很少用。 :mrgreen:

  14. zwwooooo zwwooooo 09/12/03

    快点更新!

  15. Y Y Y Y 09/12/03

    还是继续我的火狐 :grin:

发表评论

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

*

:razz:

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

引用(关闭):1

pingback from chrome的几个常用功能| axiu的1987 Google Chrome中文站 2009/11/27