只要安装了谷歌浏览器,就可以使用Google Chrome开发者工具了

Google Chrome开发者工具是内嵌到浏览器的开发工具

打开方式:按F12

前端-chrome开发者工具


主要介绍以下三个常用功能,其他自行查资料


1、Elements

Elements这个就比如页面的每个元素吧,比如这个图片,可以通过Elements找到,点击箭头,然后选择自己想要查看要素或位置,Elements会跳转到相应的实现代码

前端-chrome开发者工具前端-chrome开发者工具


2、Console

Console可以查看网页运行后提示的消息,错误或者警告以及输出内容等,js代码中或者Console台直接添加console.log("输出内容");或者console.debug("输出内容"),就可以在Console台看到输出的内容

前端-chrome开发者工具


3、模拟移动设备前端-chrome开发者工具

前端-chrome开发者工具


本机chrome版本:56(版本不同,略有差异)

前端-chrome开发者工具前端-chrome开发者工具



相关文章:

  • 2021-11-18
  • 2021-12-14
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-02
  • 2021-12-19
猜你喜欢
  • 2021-07-29
  • 2022-01-26
  • 2021-11-22
  • 2021-10-07
  • 2021-07-01
  • 2021-07-21
相关资源
相似解决方案