最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • chrome devtools 不常用但非常实用的操作

    正文概述 掘金(shengyuzeng123)   2020-11-24   526

    1.重新发起xhr请求

    在平时和后端联调时,我们用的最多的可能就是Network面板了。但是每次想重新查看一个请求,我们往往都是通过刷新页面、点击按钮等方式去触发xhr请求,这种方式有时显得会比较麻烦,我们可以通过google提供的Replay XHR的方式去发起一条新的请求,这样对于我们开发效率的提升是有所帮助的。

    2.编辑页面上的任何文本

    在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页的编辑了。

    这个功能也是非常NICE了,比如你要测试一个长数据是否为紊乱页面布局,就不必从前端去写死一个数据或者让后端修改数据后重新请求,可以直接在页面上进行编辑。

    3.网络面板(Network)的幻灯片模式

    启动Network 面板下的Capture screenshots就可以在页面加载时捕捉屏幕截图。有点幻灯片的感觉。 chrome devtools 不常用但非常实用的操作

    4.递增/递减 CSS 属性值

    作为前端开发,平时少不了通过Elements面板去查找元素以及它的css样式。有时调整像素px会比较麻烦一点,这时就可以使用快捷键去帮你完成,选中Styles中你要调整的某个像素值附近,即可根据快捷键操作

    * 增量0.1
      * Mac:Option +向上和Option +向下
      * Windows:Alt +向上和Alt +向下
    * 增量1
      * Mac:向上+向下
      * Windows:向上+向下
    * 增量10
      * Mac:⇧+向上和⇧+向下
      * Windows:⇧+向上和⇧+向下
    * 递增100
      * Mac:⌘+向上和⌘+向下
      * Windows:Ctrl +向上和Ctrl +向下
    

    5.将图片复制为数据 URI

    • 选择Network面板
    • 在资源面板中选择Img
    • 右键单击copy response(已编码为base 64

    6.截图DOM元素

    当你只想对一个特别的 DOM 节点进行截图时,你可能需要使用其他工具弄半天,但现在你直接选中那个节点,打开 命令Command(ctrl/cmd+shift+p) 菜单并且使用 节点截图 Capture node Screenshot 就可以了。

    不只是这样,你同样可以用这种方式 实现全屏截图(包括看不到的滚动条区域内的内容) :通过 Screenshot Capture full size screenshot 命令。


    起源地下载网 » chrome devtools 不常用但非常实用的操作

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元