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. jquery 选择器大全

    jquery 选择器大体上可分为4 类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表单选择器 其中过滤选择器可以分为: 1.简单过滤选择器 2.内容过滤选择器 3.可见性过滤选择器 4.属 ...

  2. 3Dmax 创建物体

    扩展基本体-切角长方体: 增加边: 删除边:在边选择模式下, 选择想要删除的边, 按下ctrl+backsapce

  3. [CF#286 Div2 D]Mr. Kitayuta's Technology(结论题)

    题目:http://codeforces.com/contest/505/problem/D 题目大意:就是给你一个n个点的图,然后你要在图中加入尽量少的有向边,满足所有要求(x,y),即从x可以走到 ...

  4. nginx中获取真实ip

    nginx反向代理配置时,一般会添加下面的配置: proxy_set_header Host $host;      proxy_set_header X-Real-IP $remote_addr;  ...

  5. Android Studio2.0 教程MAC版 -快捷键篇

    本文转至 Android Studio2.0 教程从入门到精通MAC版 - 提高篇 ( OPEN 开发经验库) 第二篇我们开发了一个Hello World应用,并介绍Android Sutdio的界面 ...

  6. 【POJ 2187】Beauty Contest 凸包+旋转卡壳

    xuán zhuǎn qiǎ ké模板题 是这么读吧(≖ ‿ ≖)✧ 算法挺简单:找对踵点即可,顺便更新答案. #include<cstdio> #include<cstring&g ...

  7. ie-css3.htc 可以让IE低版本浏览器支持CSS3 的一个小工具

    ie-css3.htc 先说道说道这斯是弄啥嘞 ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性borde ...

  8. CodeForces 450B 矩阵

    A - Jzzhu and Sequences Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  9. sql-将查询字段拼接起来

    sql语句 select (a + b) as c mysql不起作用

  10. jquery $.each 和for怎么跳出循环终止本次循环

    1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each则对应的使用return true 和return false. ...