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

谷歌浏览器F12基本用法

来源:互联网 2023-02-21 23:22:03 330

谷歌浏览器的F12,开发人员调试利器;小编在这里做的只是抛砖引玉的作用,更为强大的功能还需要读者的进一步研究哦nC7办公区 - 实用经验教程分享!

工具/原料

  • 谷歌浏览器

方法/步骤

  • 1

    第一步:打开你想进行调试的页面,并按F12进入到调试模式nC7办公区 - 实用经验教程分享!

    此处以百度页面为例进行功能展示nC7办公区 - 实用经验教程分享!

    这是关于最右侧“元素选择器”的功能展示:nC7办公区 - 实用经验教程分享!

    谷歌浏览器F12基本用法nC7办公区 - 实用经验教程分享!

  • 2

    关于第二个功能的使用,这个功能是将页面适应成手机屏幕大小,如果是开发电脑和手机同时使用的软件时这个功能比较有用nC7办公区 - 实用经验教程分享!

    谷歌浏览器F12基本用法nC7办公区 - 实用经验教程分享!

  • 3

    elements:点击这个功能后出现的是当前页面的html文件,在你想实时修改的那个元素处双击,可以暂时修改,不过并没有同步到后台,这个功能通常和第一个功能元素选择器搭配使用nC7办公区 - 实用经验教程分享!

    谷歌浏览器F12基本用法nC7办公区 - 实用经验教程分享!

  • 4

    console:控制台,用来打印错误信息和你在后台写的console.log("显示信息")nC7办公区 - 实用经验教程分享!

    谷歌浏览器F12基本用法nC7办公区 - 实用经验教程分享!

  • 4相关内容未经授权抓取自百度经验
  • 5

    source:资源管理功能,用于调试js文件,这里要说明的一点是,在右侧找不到你想调试的js文件时,可以在后台写“debugger”进入到这个js文件后可以在右侧单击打断点,想调哪里就哪里nC7办公区 - 实用经验教程分享!

    谷歌浏览器F12基本用法nC7办公区 - 实用经验教程分享!

    谷歌浏览器F12基本用法nC7办公区 - 实用经验教程分享!

  • 6

    network:网络功能,用于查看相关的ajax请求,详情请看图片(顺序:从左到右,从上到下)nC7办公区 - 实用经验教程分享!

    谷歌浏览器F12基本用法nC7办公区 - 实用经验教程分享!

  • 注意事项

    • 实践是检验真理的唯一标准,各位看官一定要动手实践呀

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


    标签: 浏览器浏览基本

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