素材巴巴 > 程序开发 >

前端谷歌浏览器调试

程序开发 2023-09-15 22:12:46

【浏览器调试工具精讲】Chrome Dev Tools精讲，前端必看！

文章目录

  • 常用Tab
  • 样式的来源如继承、自定义等
  • console
  • source
  • network
  • Application

    • 在这里插入图片描述

    命令菜单

    主题切换

    Command shift P 输入主题关键字：可以切主题
    在这里插入图片描述

    截屏

    screen shot 部分截屏
    full size screenshot 全截屏（包含滚动条下的内容）
    node screen shot截取node
    在这里插入图片描述
    node screen shot截取node: 1选择元素， 2node screen shot进行截取
    在这里插入图片描述

    窗口停放位置

    依次为：底部、左侧、独立窗口、
    在这里插入图片描述

    常用Tab

    element

    检查元素： 选中元素，右键检查
    在这里插入图片描述
    把鼠标放在element上的网盘元素上，左侧页面出现两种颜色：蓝色是本我的大小，橘色是magin。可以尝试element的其他元素，如更多会出现绿色padding

    在这里插入图片描述
    查找DOM元素，
    快捷键：command + F
    查询方式： 文本查询、css选择器、Xpath
    文本查询
    输入关键词即可
    css选择器
    查找session, : session
    查找ID为head的div: div#head
    在这里插入图片描述

    Xpath
    //div/div/a 意思：//不指定某个元素，即在全局内查找。A/B指定在元素A下查找元素B
    整体意思：

    在这里插入图片描述

    查找ID

    在这里插入图片描述

    在这里插入图片描述

    修改样式、样式文件定位

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    样式的来源如继承、自定义等

    user agent 浏览器内置的
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    让某个状态常驻如鼠标悬停

    在这里插入图片描述

    全局、部分样式的的选择与取消

    全局样式的选择与取消
    在这里插入图片描述

    部分样式的选择与取消
    在这里插入图片描述

    复制样式

    在这里插入图片描述

    某个样式属性的选择 compted

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    console

    在这里插入图片描述
    $_返回上一条语句执行结果
    在这里插入图片描述
    选中新闻
    在这里插入图片描述
    在这里插入图片描述
    $0上一个 $1上上一个， $2上上上一个，以此类推

    错误级别

    在这里插入图片描述
    在这里插入图片描述

    组group

    shift + 回车
    在这里插入图片描述

    time计时

    在这里插入图片描述
    在这里插入图片描述
    打开menu输入enable code folding可以折叠代码
    watch检测变量
    在这里插入图片描述

    subtree modifactons 该节点为根结点，它下面的子节点被修改了，js会暂停
    attribute modifications. 该节点的属性被修改 js被暂停
    node remove 该节点被删除 js 会暂停
    在这里插入图片描述
    在这里插入图片描述

    source

    network

    在这里插入图片描述

    在这里插入图片描述
    关闭缓存：点击 Network 标签页，勾选下方的 “Disable cache” 即可。勾选之后浏览器则会禁用网络请求的缓存，每次都请求服务器。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    Application

    通过console设置cookie和session

    在这里插入图片描述


    标签：

    上一篇： android布局-GridLayout 下一篇：

    相关文章

      无相关信息
    素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号：备案中。