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. BroadcoastReceiver之短信到来监听和获取内容

    废话就不说了,新建类继承,然后配置Manifest.xml:如下 <!--需要给一个接收短信的权限 --> <uses-permission android:name="a ...

  2. "此站点已经禁用应用程序"在sharepoint 2013中通过v2013部署app提示该错误

    该错误的原文是:the apps are disabled in this site 可以在yahoo或者bing上搜索这个错误,可以找到解决办法: msdn上也有该错误解决办法,但是如果搜索中文,目 ...

  3. Yii2初级入门教程

    下载安装 Yii挺火的,也是MVC的Web框架.国内占有率,相当不错.值得一学. 网络上提供了两个版本模板的下载, advanced, 和 basic, 使用起来一致, 提供的模块支持不同. Adva ...

  4. linux安装软件的学习

    Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...

  5. android file path

    问题 出现的异常为:java.lang.IllegalArgumentException: File /mnt/sdcard/crazyit.bin contains a pathseparator. ...

  6. (02)javascript属性

    私有属性(私有变量和私有方法) 实例属性(实例变量和实例方法) 静态属性(静态变量和静态方法) <!DOCTYPE html> <html lang="en"&g ...

  7. hdu2665 && poj2104划分树

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 47066   Accepted: 15743 Ca ...

  8. windows2003开启vpn服务

    远程连接登陆到Windows服务器,在配置VPN之前,需要设置两个地方: 1.请确认windows自带的防火墙处于关闭状态,可以在我的电脑点右键>>管理>>服务和应用程序> ...

  9. bzoj1012

    Description 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L 个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. ...

  10. 管理系统UI: System Bar 详解

    Google原文: http://developer.android.com/training/system-ui/index.html 管理系统UI之一:淡化System Bar(Dimming t ...