首页 > 电脑专区 > 电脑教程 >

前端-页面调试-在浏览器里面添加一个类进行调试

来源:互联网 2023-02-21 23:08:26 442

前端有时候写代码,但是又不想对代码进行编辑,SPN办公区 - 实用经验教程分享!

尤其是写一些页面的css,这个时候就最适合在浏览器里面进行调试了,SPN办公区 - 实用经验教程分享!

比如说添加一个新的类来调试,下图是简略的概括的核心内容SPN办公区 - 实用经验教程分享!

前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

工具/原料

  • 网页,谷歌浏览器,鼠标,键盘

方法/步骤

  • 1

    这次还是拿百度的首页进行调试一番,SPN办公区 - 实用经验教程分享!

    老规矩,先打开百度的首页,然后检查来打开工具栏SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

  • 2

    下面的这个步骤就需要稍微讲讲这个工具栏的应用了,SPN办公区 - 实用经验教程分享!

    先来看看右边工具栏的这个搜索的,这个可以搜索很多东西,SPN办公区 - 实用经验教程分享!

    比如说什么属性呀,宽度高度之类的都可以,如下:SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

  • 2此文章未经许可获取自百度经验
  • 3

    为了方便讲解,这边就直接简化操作,SPN办公区 - 实用经验教程分享!

    就检查一下百度的首页的图片,可以看到已经对应选中元素了,SPN办公区 - 实用经验教程分享!

    然后就直接点击工具栏右上角的加号SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

  • 4

    然后浏览器就会自动选中刚刚选中的元素,SPN办公区 - 实用经验教程分享!

    并且会做一个类,如图,SPN办公区 - 实用经验教程分享!

    然后在类里面添加属性,可以自定义,也可以快速操作,SPN办公区 - 实用经验教程分享!

    自定义有提示的,比如下图SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

  • 5

    当然这边也可以采用浏览器自带的一个功能,SPN办公区 - 实用经验教程分享!

    快速操作,就是点击这个属性的右下角的那里,SPN办公区 - 实用经验教程分享!

    然后就可以快速添加属性了,添加完成后就可以看到效果了SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

    前端-页面调试-在浏览器里面添加一个类进行调试SPN办公区 - 实用经验教程分享!

  • 注意事项

    • 目前使用的浏览器环境统一就是使用谷歌
    • 另外这里需要注意的就是尽量使用英文的半角符号
    • 觉得本文还可以的读者大大,谢谢您的肯定,♪(・ω・)ノ

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!SPN办公区 - 实用经验教程分享!


    标签: 浏览器浏览

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码