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. pax3 quick start guide

    pax3 quick start guide 外观图: 配置:1 * pax3 主机:2 * 吸嘴(一个平的,一个凸的):2 * 底盖(一个烟草的,一个烟膏的):3 * 过滤片:1 * USB充:1 ...

  2. python活用isdigit方法显示系统进程

    如何利用字符串的内置函数isdigit(),判断一个字符串是一个纯数字.如果是纯数字会返回True,否则返回fasle. 利用isdigit()方法编写一个python脚本显示所有系统进程pid.os ...

  3. 【BZOJ4316】小C的独立集（仙人掌，动态规划）

    [BZOJ4316]小C的独立集(仙人掌,动态规划) 题面 BZOJ 题解 除了普通的动态规划以外,这题还可以用仙人掌的做法来做. 这里没有必要把圆方树给建立出来 \(Tarjan\)的本质其实就是一 ...

  4. 关于servlet连接数据库会出现空指针异常情况

    一.servlet在连接数据库时,如果没有事先配置,当用Tomcat运行时会出现NullPointer的情况,是因为Tomcat在运行你的应用程序时没有连接mysql的jar包, 正确做法是将你的my ...

  5. 如何刻录cd音乐

    用nero,选择cd,音乐光盘(第一个)可以添加入wav,MP3等.刻录即可.

  6. Arch Linux下韩文重叠显示

    解决方法 sudo pacman -S wqy-microhei-kr-patched

  7. 关于json_encode转数组为json对象时里有数组格式数据的问题

    前言:这次是给一款小程序提供接口时发现的 别的不多说,下面直接看出现问题的json数据 可以看到,这是一个大的json对象,是由多维数组组成,一般api接口提供的也是这种格式. 但是仔细看红框中的内容 ...

  8. ON DUPLICATE KEY UPDATE单个增加更新及批量增加更新的sql

    转: ON DUPLICATE KEY UPDATE单个增加更新及批量增加更新的sql 本文为博主原创,转载请注明出处. 在实际应用中,经常碰到导入数据的功能,当导入的数据不存在时则进行添加,有修改时 ...

  9. SpringBoot文件上传

    先建工程 只勾选web和freemarker模板 最后 先看一下最终目录结构 先修改pom文件,加入common-io依赖 然后修改Application.yml文件 spring: freemark ...

  10. tensorflow中tf.ConfigProto()用法解释

    在看C3D代码的时候,看见有一段代码是 config = tf.ConfigProto()#主要是配置tf.Session的运行方式,GPU还是CPU,在这里选择的是GPU的运行方式 config.g ...