Chrome调试工具的使用

最新推荐文章于 2024-04-23 21:50:58 发布

bear*6

最新推荐文章于 2024-04-23 21:50:58 发布

阅读量523

点赞数 3

分类专栏：前端样例实战文章标签： chrome 前端

本文链接：https://blog.csdn.net/m0_48375854/article/details/121158194

版权

前端样例实战专栏收录该内容

10 篇文章 6 订阅

订阅专栏

作为一名合格的程序员，会使用调试工具当然是必不可少的啦，今天就和大家分享几个用Chrome调试工具调试 HTML 结构和 CSS 样式的小妙招。
当我们写好结构和样式后，在谷歌浏览器中打开就可以看到我们的页面啦。小熊写了一个简单的页面，用Chrome 浏览器展示如下：


<!DOCTYPE html>
<html>
 <head>
  <title>促销页面的实现</title>
  <meta charset="UTF-8">
 </head>
 <body>
  <h1>促销信息</h1>
  <dl>
   <dt>
    <img alt="笔记本电脑" src="diannao.jpg" width="256px" height="256px">
   </dt>
   <dd>笔记本拍卖</dd>
   <dd>四核，4G内存，256G硬盘</dd>
   <dd>跳楼价疯抢<span style="font-size:36px;color:red;">1</span>元起！</dd>
   </dl>
  <p>这台笔记本电脑<span style="color:red">不错</span>，快速<span style="color:green;font-size:36px">抢购</span>吧！</p>
 </body>
<a href="http://taobao.com" target="_blank">点击链接购买</a>

</html>

在这里插入图片描述
第一步，在 Chrome 浏览器页面中，按下 F12 键或者右击页面空白处->检查，就可以打开我们的调试工具啦。

第二步：使用调试工具
① Ctrl+滚轮可以放大开发者工具代码大小。
② 左边是 HTML 元素结构，右边是 CSS 样式。
③ 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
④ Ctrl + 0 复原浏览器大小。
⑤ 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
⑥ 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
现在，我们来选中元素试试吧！
在这里插入图片描述

bear*6

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Chrome调试工具的使用

作为一名合格的程序员，会使用调试工具当然是必不可少的啦，今天就和大家分享几个用Chrome调试工具调试 HTML 结构和 CSS 样式的小妙招。当我们写好结构和样式后，在谷歌浏览器中打开就可以看到我们的页面啦。小熊写了一个简单的页面，展示如下：...
复制链接

扫一扫