【编程入门】超好用HTML CSS 前端网页制作必备神器 Chrome 开发者工具 教学 | chrome developer tools tutorial for beginners

 

https://youtu.be/sbh6WFBME_0

Chrome 开发者工具是一套内置于Google Chrome浏览器中的Web开发和调试工具，可用来对网站进行迭代、调试和分析。 ———————————————————— 你想学习怎么制作网页？想拥有属于自己的网站？不论你是学生，白领又或者是追梦者，欢迎你加入这个专门为零基础同学们打造的免费网页编程教程。 我们会在教程里一起动手写代码，让你以最快的速度上手网页编程。在教程里我们会学习HTML, CSS和JavaScript，这是制作网页的必备工具。除此之外，我们也会学到怎么使用代码编辑器(Code Editor)去编写代码。 记得要关注频道，那样你就不会错过类似这样的网页编程教程了。 你的梦想从这里开始！ ☕ ☕ ☕ 给我买杯咖啡提提神吧！ ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4 #编程入门 #chrome开发者工具 #chromedevtools

文字内容：

正所谓工欲善其事，必先利其器 不管你是在哪一个行业 只要你想把工作做到极致 那手上就必须要有一款神器 去辅助你更高效的完成工作 今天我们这个视频 就来聊聊网络应用开发者必备的开发工具 大家好 我是文轩，欢迎收看文轩解码 一般程序员，尤其是专注在网页制作的程序员 对Chrome DevTools 开发者工具并不陌生 Chrome 开发者工具是一套内置在 Google Chrome浏览器中的开发和调试工具 程序员一般用它来对网页进行分析，迭代和调试 程序员把HTML和CSS编写完成之后 通常会打开浏览器 去预览写好的源代码 看看最终的效果是不是符合最初的设计方案 一般来说，很少人能一步到位 通常都需要做一些微调整 才能达到最终想要的效果 修改代码，保存代码和预览代码 这三部曲 就成了需要不断重复的循环 这样的循环很耗时，而且还很低效 所以程序员必须使用Chrome开发者工具 去提高开发效率 Chrome开发者工具对于网页制作至关重要 所以同学们一定要学会使用这个工具 用好这个工具，才能腾出更多的时间去。。。 接下来，我们开始具体说说怎么用这个开发者工具 要启动开发者工具 我们可以在网页的任何一个地方点击右键 然后在选项里点击Inspect(检查) Chrome这时候就会启动这个工具 你也可以按F12键去打开开发者工具 甚至你还可以按cmd+option+i （macOS） ctrl+shift+i (Windows) 启动 我也是醉了，好多快捷键啊！ 当开发者工具被启动后 Chrome会在右侧显示这个工具 我们可以调整工具的所在位置 它一共有四种调整模式 就是我们可以把工具显示在右侧 下侧 左侧 和完全把它弹出 一般程序员都会有两个屏幕 那样就可以把弹出的窗口 移到第二个屏幕 然后最大化这个窗口 那样程序员在调试的时候也比较方便一点 这里有很多Panel (面板) 但是今天呢我们只关注两个 Element （元素）和 Network （网络） 等同学们以后学会了JavaScript 我们再说说其他的Panel 在Element面板里会显示看似很像 HTML的DOM (Document Object Model) 和 CSS HTML 和 DOM 是有区别的 当浏览器成功下载HTML源代码后 浏览器会把这些HTML源代码 转换成DOM树结构 (Tree Structure) HTML源代码其实是文本 (Text) 看不出它们的直接关系 把HTML转换成DOM有一个好处 就是DOM现在能显示每个节点的关系 我们看看这张DOM图 Head和Body是HTML的子节点 H1是DIV的子节点 有了这一层关系，我们就可以透过JavaScript去 提取或者更改这些节点 当我们把鼠标移到这些节点的时候 左边的页面就会高亮 (Highlight) 对应的元素 (Element) 我们也可以用鼠标去点击扩展或者折叠这些节点 我们还可以用上下键在节点里移动 我们还可以点击这里 然后精准的从页面里选择我们要检查的元素 点击后 Element Panel 就会跳对应的元素DOM节点 如果想针对HTML DOM进行搜索的话 可以先点击这里 然后按cmd + f （macOS） 或者 ctrl + f （Windows） 我们可以在这里输入关键词 也可以用selector（选择器）进行搜索 比如说.content 除了搜索，我们也可以针对HTML DOM做一些更改 比如说，如果我们想把这个H3的标题改成H2 我们就可以双击这里，直接把H3换成H2 当我按Enter键的时候，左边的页面会自动更新 我是不需要保存代码和刷新页面 就可以直接预览看到效果 这样我就不需要在编辑器和浏览器之间频繁切换 省时省事之余 还能让我更集中 这里要顺便提醒一下，这些更改都是暂时性的 在刷新页面之后就会消失，所以当我们测试完之后 必须把这些更改保存到源代码里 我们也可以直接在这里删除元素 我随便选一个元素，点击右键 然后选择Delete element就可以了 内容也可以更改 我们双击这里进行更改，然后按Enter键 你看，内容更新了 当我们点击DOM元素的时候 CSS面板就会更新相对应的CSS style 这里就是content class里所有的CSS参数 我们可以点击这里禁用某个参数 也可以点击这里修改参数 我们尝试把背景颜色换成绿色 我们还可以用上下键去加减这些值 如果想添加新的参数，可以点击这里 然后输入新的参数， 比如说：border: 1px solid red 下面这里有一个盒子， 我们来看一下，这个盒子究竟有什么用处呢？ 它主要的功能就是让程序员 对一个元素的占用空间一目了然 因为我们肉眼看见的内容 它占用的空间可能比实际的还多 因为padding和margin的空白区域肉眼是没办法分辨的 需要靠这个盒子显示出来 我们看看这个DIV 它实际占用的空间是多少 内容本身的宽度是300px， 因为在这里我们定义了 高度的话， 我们没有定义 所有浏览器会给我们配一个值 然后padding (内边距)， 我们设置了40px 所有上下左右的值都是40px border（边框）和margin （外边距）的值都是空的 因为我们在css里没有设置这些值 很多时候，我们需要靠这个盒子 去帮我们梳理一下元素的实际占用空间 没有它，就会像盲人摸象那样 只能去猜它的实际占用空间 如果想知道这些参数保存在哪一个文档 我们可以点击这里 这里显示的是在style.css文档里的第6行 点击这个链接会直接打开style.css的源代码 这个源代码会出现在Sources面板里 我们看看这里，这些都是网站的源代码 我们可以随意点击查看这些源代码 那接下来，我们说说Network Panel (网络面板) 我先打开google的页面，它们的请求比较多 方便等一下给你们解释 这个面板大概能分成5大部分 有Control (控制板) Filters（过滤器） Timeline （时间轴） Request Table （请求列表） 和Summary (概要） 每一次我们刷新页面 网络面板就会自动记录所有和网络相关的请求响应 这里会显示多条时间轴 每一条时间轴代表一个网络活动 列表这里也会显示所有的请求 当我们点击列表里的数据 时间轴这里会高亮相对应的数据 右侧这里也会显示请求的细节 比如说文档的URL 如果有头部信息（header）也会在这里显示 这里还能切换到其他tab 这个Preview是预览下载的文档 Response会显示下载的源代码 我们还能点击这里格式化已经被minify的源代码 一般我们访问的网站 可能会有十几二十个请求响应 列表这里会排得满满的 这时候，我们可以用过滤器 过滤掉我们不需要关注的文档 我们可以点击这里，假设我们只关注css文档 我就点css 如果我只想看html文档，就点击Doc 我也可以在这里输入关键词，比如说api.js 我们可以点击这里清空所有的信息 还有点击这里，我们可以模拟各种网速 这也是我经常使用的功能 网页一般在网速很慢的设备上会出现各种各样的状况 正好我们可以利用这个功能去模拟网速很慢的设备 让我们检查网页在加载的时候会不会出现超时的情况 导致网页出错 除了模拟网速 我们也能模拟网页在各种设备上是怎么显示的 点击这个图标后，就可以启用Device Toolbar去预览 这里有一些默认的屏幕尺寸 我们也可以从这里 选择要测试的移动设备 我们还能选择Responsive，手动调整要测试的像素 Element和Network面板介绍完了 这两个面板对于初学者来说比较容易上手 Chrome开发者工具是一款很强大的工具 等以后我们开始学习JavaScript 我再和你们分享其他的面板 比如说Console和Sources 这是学JavaScript必须要用好的功能 好的，本期视频就到这里 希望你们喜欢这次的分享 如果觉得它对你有帮助 欢迎点赞，分享和关注 我们下期见，拜拜！