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. ☆ [POJ1021] Intervals 「差分约束」

    传送门 >Here< 题意:给出N段区间,并告诉你每段区间里有几个数(一个位置只能放一个数) 问总共至少有几个数 解题思路 差分约束题,本蒟蒻也是第一次做差分约束题…… 所谓差分约束,常常 ...

  2. sublime3添加verilog自动补全代码段

    前言 sublime默认的verilog自动补全十分垃圾,不过提供了代码段这个功能,你可以自己写个重用率高的代码段减轻工作量.写个模板当tb也很爽啦. 流程 1.打开user文件夹,创建verilog ...

  3. 【BZOJ1013】【JSOI2008】球形空间产生器 高斯消元

    题目描述 有一个\(n\)维空间中的球,告诉你球面上\(n+1\)个点的坐标,求球心的坐标. \(n\leq 10\) 题解 设\(a_{i,j}\)为第\(i\)个点的第\(j\)维坐标,\(i=0 ...

  4. IDEA 不识别的MAVEN 项目应如何处理

    有些人啊,上传到git的项目,根本不是项目而是一个文件夹,文件夹里边还有个文件夹那才是项目,IDEA 不会识别出它是项目来 这个时候,需要选择这个文件夹下的pom.xml 文件 右键 pom.xml然 ...

  5. opencv 图片剪切

    import cv2 as cv import numpy as np # 图片剪切 img = cv.imread('../images/moon.jpg', flags=1) # flags=1读 ...

  6. MT【307】周期数列

    (2017浙江省数学竞赛) 设数列$\{a_n\}$满足:$|a_{n+1}-2a_n|=2,|a_n|\le2,n\in N^+$证明:如果$a_1$为有理数,则从某项后$\{a_n\}$为周期数列 ...

  7. MT【293】拐点处切线

    (2018浙江高考压轴题)已知函数$f(x)=\sqrt{x}-\ln x.$(2)若$a\le 3-4\ln 2,$证明:对于任意$k>0$,直线$y=kx+a$ 与曲线$y=f(x)$有唯一 ...

  8. [luogu3246][bzoj4540][HNOI2016]序列【莫队+单调栈】

    题目描述 给定长度为n的序列:a1,a2,...,an,记为a[1:n].类似地,a[l:r](1<=l<=r<=N)是指序列:al,al+1,...,ar-1,ar.若1<= ...

  9. pytest_01_安装和入门

    目录 pytest 安装与入门 1.pip install -U pytest 2.创建一个test01.py的文件 3.在该目录下执行pytest(venv) 4.执行多个,新建一个py文件 tes ...

  10. nginx proxy文件编写总结

    upstream.conf upstream api { server 192.168.10.10:8080; server 192.168.10.20:8080;} server{ listen 4 ...