zoukankan      html  css  js  c++  java
  • chrome开发者工具各种骚技巧

    作者:老姚
    链接:https://juejin.im/post/5af53823f265da0b75282b0f

    对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了。最近大神(@小鱼二)推荐我一个网站,才知道chrome还有各种骚姿势。这个网站是:umaar.com/dev-tips/,本文分享一些实用且聪明的调试技巧。


    1、曾经,在线调伪类样式困扰过你?

    640?wx_fmt=jpeg

    2、源代码快速定位到某一行!ctrl + p

    640?wx_fmt=gif


    3、联调接口失败时,后台老哥总管你要response?

    640?wx_fmt=gif


    4、你还一层层展开dom?Alt + Click

    640?wx_fmt=gif


    5、是不是报错了,你才去打断点?

    640?wx_fmt=gif


    6、你是不是经常想不起来,在哪绑定事件的?

    640?wx_fmt=gif


    7、你是不是打断点时还要去改代码?

    640?wx_fmt=gif


    8、看dom层级的最直观的方式?

    640?wx_fmt=gif


    9、查一些特定的请求,过滤器用过吗?

    640?wx_fmt=gif


    10、在Elements面板调整dom结构很不方便?

    640?wx_fmt=gif


    11、想知道,某图片加载的代码在哪?Initiator!

    640?wx_fmt=jpeg640?wx_fmt=jpeg640?wx_fmt=jpeg


    12、不想加载某个文件了?

    640?wx_fmt=jpeg640?wx_fmt=jpeg


    多的就不列举了,可以看看开头的网站。看了有几个功能我电脑(win10)是没有的,应该跟chrome版本有关。


    开发者工具的功能确实挺多,多得有时根本用不上,官网教程建议每个前端人员都看看:


    中文版:https://www.html.cn/doc/chrome-devtools/


  • 相关阅读:
    Vue在移动端App中使用的问题总结
    CSS中的自适应单位vw、vh、vmin、vmax
    sass、less中的scoped属性
    CSS中的 , > + ~
    Git 使用的问题总结
    Vux的安装使用
    React-router的基本使用
    React使用的扩展
    React使用的思考总结
    React的基本使用
  • 原文地址:https://www.cnblogs.com/hgmyz/p/12351025.html
Copyright © 2011-2022 走看看