• 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/


  • 相关阅读:
    HTML5 h1多层次样式问题
    spellcheck
    Favicon
    设计模式
    CSS 宽高的计算
    行高计算
    White-space 属性
    简约插件Plug-in for simple
    js类型及其判断
    前端路由
  • 原文地址:https://www.cnblogs.com/hgmyz/p/12351025.html
Copyright © 2020-2023  润新知