chrome使用技巧

  chrome对于开发人员来说,绝对是一个神器。下面,介绍关于它的一些小技巧:

  1.利用chrome快速定位source中的资源。

   我之前一般如果查找每个文件,都是打开控制台,在source控制面板里面一个一个去找,但是这样的效率是极低的,其实我们可以Ctrl+P,就可以输入文件名,进行搜索相应的资源了,当然,也可以只输入一部分,比如,输入.js就会把所有js文件显示出来,然后我们再去找就方便多了。

  2.如何查看被压缩的js文件

我们在source中打开一个js文件时,有时候该js文件是被压缩的,我们就不方便查看了,怎么解决这一问题呢?先看下图:

这是js文件只显示在了一行中,就无法查看了,这时我们看待图片最下面有一对大括号{},鼠标点击以下,奇迹就发生了! 看下图:

这时,上面的一行代码就展开了,我们就可以方便的对其进行查看了。

  3.移动设备模拟器

  打开F12,点击中的第二个图标,就可以在PC和移动端之间切换了。这时我们就可以根据需要来调试移动端设备了。除此之外,看下图:

在上方,我们可以选择不同的设备,在右上角,我们可以点击,可以看到还有下面这些选项:

即可以显示设备框架、显示媒体查询、尺子、dpr、设备类型、网络、截图、恢复默认设置。

chrome使用技巧的更多相关文章

  1. 转15个必须知道的chrome开发者技巧GIF

    在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...

  2. 15个必须知道的chrome开发者技巧(转)

    15个必须知道的chrome开发者技巧 在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟 ...

  3. Chrome 调试技巧

    Chrome 调试技巧 1.alert 这个不用多说了,不言自明. 可参考:https://www.cnblogs.com/Michelle20180227/p/9110028.html 2.cons ...

  4. Chrome调式技巧

    1. 使用alert()调试 2.  console 基本输出 console.log("打印字符串"); console.error("我是个错误"); co ...

  5. 前端开发神一样的工具chrome调试技巧

    前端开发神一样的工具chrome调试技巧 文章来自  Colin-UED // 与您分享前端开发知识 主页 Javascript HTML CSS NodeJs User Experience FE ...

  6. chrome使用技巧(看了定不让你失望)

    写在前面 之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了.对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其它chrome使用方面的诀窍) ...

  7. Chrome 使用技巧

    阅读目录 写在前面 快速切换文件 在源代码中搜索 在源代码中快速跳转到指定的行 使用多个插入符进行选择 设备模式 设备传感仿真 格式化凌乱的js源码 颜色选择器 改变颜色格式 强制改变元素状态(方便查 ...

  8. 15个必须知道的chrome开发者技巧

    在Web开发者中,Google Chrome是使用最广泛的浏览器.六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具.你可能已经熟悉了它的部分功能,如使用console和 ...

  9. chrome使用技巧(转)good

    阅读目录 写在前面 快速切换文件 在源代码中搜索 在源代码中快速跳转到指定的行 使用多个插入符进行选择 设备模式 设备传感仿真 格式化凌乱的js源码 颜色选择器 改变颜色格式 强制改变元素状态(方便查 ...

随机推荐

  1. 外网不能访问部署在虚机的NodeJs网站(80端口)

    外网能访问部署在虚机的NodeJs网站需注意如下: 在管理门户上配置端点(Http 80->80) 在虚机中的防火墙入站规则中增加应用程序Node.exe的允许规则 启动NodeJs的侦听进程时 ...

  2. PKI系统深入介绍

    公钥基础设施(Public Key Infrastructure,简称PKI)是目前网络安全建设的基础与核心,是电子商务安全实施的基本保障,因 此,对PKI技术的研究和开发成为目前信息安全领域的热点. ...

  3. WinForm程序执行JS代码的多种方法以及使用WebBrowser与JS交互

    方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details ...

  4. The Lifecycle and Cascade of WeChat Social Messaging Groups-www2016-20160512

    分析性论文: 分析并预测微信群的生命周期,以及群成员的邀请模式. 参考资料:http://www.360doc.com/content/16/0423/11/26166517_553076725.sh ...

  5. Ubuntu backlight

    我们可以通过键盘来调节亮度,但是那样亮度无法微调,每次变亮变得太多. 在 /sys/class/backlight/nv_backlight 这个目录下,brightness 是最主要的.backli ...

  6. C++的异常处理之一:throw是个一无是处的东西

    看这篇文章学习C++异常处理的基础知识.看完后,还不过瘾,为什么大家在C++代码中都不用Exception?为什么C++11会引入一些变化? 为什么C++ exception handling需要un ...

  7. HIbernate的增删改

    数据库是oracle 以一对多为例:user50一的一方      order50是多的一方 首先是实体类: 这里的实体是双向关系,既通过user50可以找到order50,通过order50可以找到 ...

  8. SpringMVC学习--json

    简介 json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便.比如:webservice接口,传输json数据. springmvc与json交互 @RequestB ...

  9. Linux_日志管理介绍(一)

    一.介绍 1.CentOS 6.x中日志服务已经由rsyslogd取代了原先的syslogd服务,但是rsyslogd是和syslogd服务相兼容的 2.除了系统默认的日志之外,采用RPM方式安装的系 ...

  10. 状态压缩 HDU 1565

    多组数据 给你一个n*n的矩阵 不能相邻的取数 上下左右 求最大的和 #include<stdio.h> #include<algorithm> #include<str ...