Note : Apply for google chrome canary.

You can fold code blocks in CSS (and Sass) and javascript files.This is useful for digesting large files. Code Folding can help with readability.

Enable code folding

  • Settings > Preferences > sources
  • Command ctrl + shift + p and search for folding

Folding blocks

References

Chrome DevTools: Code Folding in CSS and JavaScript for improved code readability

Chrome Dev Tools: Code Folding in CSS and Javascript for improved code readiability的更多相关文章

  1. Chrome Dev Tools ：成为更高效的开发人员

    原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...

  2. chrome dev tools

    chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...

  3. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  4. 15个你不得不知道的Chrome dev tools的小技巧

    转载自:https://www.imooc.com/article/2559 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chro ...

  5. [Debug] How to Debug a NestJs Backend using the Chrome Dev Tools

    TO debug NestJS code with Chrome dev tool, we can run: node --inspect-brk dist/rest-api/src/main.js ...

  6. [Debug] Debug Node.js Application by using Chrome Dev tools

    For example you have a server.js file, and you want to debug some problems; What you can do is: node ...

  7. Chrome Dev tools的几点小技巧

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  8. 页面性能分析-Chrome Dev Tools

    一.分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...) ...

  9. [Tools] Create your own mobile emulator device by using Chrome dev tool

    Using the New Device Emulation Interface The Device Emulation interface changed a bit with the newer ...

随机推荐

  1. CH0802 占卜DIY

    模拟 没怎么看题..直接deque模拟水过了.. 但是后来回过头看了下题意..如果再次拿到正面朝上的牌,应该是废操作..可能是数据太水了... #include <bits/stdc++.h&g ...

  2. hdu 2191 (多重背包二进制优化）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=2191 实现代码: #include<bits/stdc++.h> using namespac ...

  3. MT【282】一道几何题

    2010浙江省数学竞赛,附加题. 设$D,E,F$分别为$\Delta ABC$的三边$BC,CA,AB$上的点,记$\alpha=\dfrac{BD}{BC},\beta=\dfrac{BD}{BC ...

  4. Hdoj 1050.Moving Tables 题解

    Problem Description The famous ACM (Advanced Computer Maker) Company has rented a floor of a buildin ...

  5. 15 Zabbix Item类型之Zabbix trapper类型

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 15 Zabbix Item类型之Zabbix trapper类型 zabbix获取数据时有时会出 ...

  6. 【Luogu3733】[HAOI2017]八纵八横（线性基，线段树分治）

    [Luogu3733][HAOI2017]八纵八横(线性基,线段树分治) 题面 洛谷 题解 看到求异或最大值显然就是线性基了,所以只需要把所有环给找出来丢进线性基里就行了. 然后线性基不资磁撤销?线段 ...

  7. CDQ分治与整体二分学习笔记

     CDQ分治部分 CDQ分治是用分治的方法解决一系列类似偏序问题的分治方法,一般可以用KD-tree.树套树或权值线段树代替. 三维偏序,是一种类似LIS的东西,但是LIS的关键字只有两个,数组下标和 ...

  8. 解决mysql配置文件my.cnf添加max_connections不生效

    问题描述: 最新为了方便测试,通过mysql官方指定的yum源安装了mysql5.6.40,在向mysql的配置文件my.cnf添加max_connections=3600后,重启mysql后发现不生 ...

  9. redux源码解析-函数式编程

    提到redux,会想到函数式编程.什么是函数式编程?是一种很奇妙的函数式的编程方法.你会感觉函数式编程这么简单,但是用起来却很方便很神奇. 在<functional javascript> ...

  10. Linux添加新硬盘及分区，格式化，挂载

    1.查看分区信息: [root@localhost /]# fdisk -l Disk /dev/vdb: 209.7 GB, 209715200000 bytes16 heads, 63 secto ...