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. 二叉搜索树（BST）详解

    前言:平衡树的前置知识吧 二叉搜索树的定义: 二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: (1)若左子树不空,则左子树上所有结点的值均小于或等于它的根节点的值: (2)若右子树不空,则右子 ...

  2. 【BZOJ3613】[HEOI2014]南园满地堆轻絮（贪心）

    [BZOJ3613][HEOI2014]南园满地堆轻絮(贪心) 题面 BZOJ 洛谷 题解 考虑二分的做法,每次二分一个答案,那么就会让所有的值尽可能的减少,那么\(O(n)\)扫一遍就好了. 考虑如 ...

  3. 使用 sizeof 获取字符串数组的大小

    @2018-11-1 字符串组成的数组存放于指针数组中,使用 sizeof 获取数组大小 [验证] #include <stdio.h> #define BootScreen " ...

  4. 前端基础-- CSS

    CSS知识 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染).Css之车更丰富的文档外 ...

  5. jsp （1）

    一.jsp介绍: jsp是servlet的一种包装.是html+js+css+servlet. jsp文件无需配置,如果修改了jsp文件不需要reload应用. jsp访问方法:直接访问文件名.jsp ...

  6. Arcgis for qml - 鼠标拖拽移动

    以实现鼠标拖拽文本图层为例 GitHub:ArcGIS拖拽文本 作者:狐狸家的鱼 目的是利用鼠标进行拖拽. 实现两种模式,一种是屏幕上的拖拽,第二种是地图上图层的挪动. 屏幕上的拖拽其实跟ArcGIS ...

  7. JQuery选择器，事件，DOM操作,动画

    JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...

  8. haploview画出所有SNP的LD关系图

    有时候我们想画出所有SNP的LD关系图,则需要在命令行添加“-skipcheck”命令行,如下所示: java -jar Haploview.jar -skipcheck -n -pedfile 80 ...

  9. Methods for follow-up research of exome analysis：外显子后续分析研究思路总结

    外显子后续分析研究思路一般有以下几种(Methods for follow-up research of exome analysis): 1.对突变频率.突变类型.突变方式进行统计分析 Mutati ...

  10. spring cron表达式(定时器)

    转: spring cron表达式(定时器) 写定时器时用到,记录一下: Cron表达式是一个字符串,字符串以5或6个空格隔开,分开工6或7个域,每一个域代表一个含义,Cron有如下两种语法 格式:  ...