开发人员工具

更新

您是否曾经想要改变文本的颜色或大小,找到一个特定的html元素或定位一个有bug的javascript文件?

开发者工具捆绑在谷歌Chrome和Safari浏览器中,允许任何人检查组成网页的元素(html, css, js)。只需右键单击页面中的任何元素,并从上下文菜单中选择“Inspect element”选项。这将打开Developer Tools并钻取您单击的元素。

开发人员工具

选择“Inspect Element”将弹出开发人员工具,如下所示:

developer-tools-2

您所检查的元素的html将在左下角的面板中突出显示。您所检查的元素的css显示在右下角的面板中。

developer-tools-3

点击左边面板中的html代码和右边面板中的css代码将允许您在页面上直接预览html或css更改。让我们把css的font-family属性改为Arial,把intro类的字号改为24px:

developer-tools-4

整洁的,是吗?使用这种方法,您可以找到网页上的任何元素,查看创建页面的html和查看为页面设置样式的css。

重要提示

使用开发人员工具并不会将这些更改保存到你的实时网站。您仍然需要修改呈现代码的实际html、css或模板文件。如果你正在使用我们的WordPress主题,你可以访问外观->主题选项-> CSS节,并将你修改的代码粘贴到文本区来覆盖你的主题的默认样式。对于上面的例子,css看起来是这样的:

#home welcome p.intro {font-family: Arial;字体大小:24 px;}

开发人员工具视频教程

以下是一些关于Chrome开发工具的视频教程:

通讯
加入了280000年独立网站所有者

下一个加入我们每月通讯的人将获得25%的优惠!

我们保证100%的隐私。你的信息不会被分享。

这一项已入账。书签的永久链接

发布的他在Graph Paper Press工作

Thad是Theme的创始人。作品和图形纸印刷机。此前,他曾为《今日美国》制作在线多媒体和纪录片项目,包括奥巴马总统的就职典礼等。他和妻子艾比住在纽约布鲁克林。

关于“开发人员工具”的9个想法

  1. “使用开发人员工具并不会将这些更改保存到你的实时网站”。那么,我为什么需要它?你有更简单的方法来处理这类人吗?我去了主题选项,没有CSS部分。

    1. 您需要它是因为您可以通过在浏览器中直接修改CSS来预览更改。然后,只需将这些更改应用到样式表。

      1. 我已经将gridspace html导入到dreamweaver中,如果我在里面编辑它有没有办法保存并将其附加到我的博客中以便我的更改是实时的?

  2. 如果您能添加允许对站点应用更改的FTP,将会更有用。这种方法将消除任何安全性或不可靠的访问问题。
    顺便说一句不错的文章。

  3. 你好,你知道改变字体颜色的CSS吗?现在它们是白色的,我需要它们是黑色的……谢谢!

  4. 开发工具使我的生活如此简单!我可以通过inspect element来测试新的css元素。这是一个节省时间的功能!爱死它了。

留下一个回复