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. Python_sys.argv 命令行参数获取使用方法

    import sys print(sys.argv) """ 获取命令行参数 输入 python3 sys.argv_demo.py 输出: ['argv.py'] 输入 ...

  2. 让$this->error()返回json配置

    // 表单请求类型伪装变量'var_method' => '_method',// 表单ajax伪装变量'var_ajax' => '自定义',// 表单pjax伪装变量'var_pjax ...

  3. HNOI2019 游记

    HNOI2019 游记 Day 0 其实考前几天,心里还是挺慌的.结果最后 Day 0 的时候,因为种种原因反而释然了.也许是觉得,在这一步退役,也没有什么好害怕的吧. OI 本身就是一项偶然性太大的 ...

  4. [POJ 1637] Sightseeing tour（网络流）

    题意 (混合图的欧拉回路判定) 给你一个既存在有向边, 又存在无向边的图. 问是否存在欧拉回路. \(N ≤ 200, M ≤ 1000\) 题解 难点在于无向边. 考虑每个点的度数限制. 我们先对无 ...

  5. Java复习总结——注解

    注解 概念及作用 概念 注解即元数据,就是源代码的元数据 注解在代码中添加信息提供了一种形式化的方法,可以在后续中更方便的 使用这些数据 Annotation是一种应用于类.方法.参数.变量.构造器及 ...

  6. 20165223 结对编程之四则运算week2-整体总结

    目录 一.结对对象 二.需求分析 三.设计思路 四.核心代码 五.功能截图 六.结对感受 一.结对对象 担任角色(本周交换角色,流动学习) 驾驶员(Driver):20165218 赵冰雨(是控制键盘 ...

  7. 通俗易懂的来理解Iaas,Paas,SaaS

    首先我们先来了解一下这几个单词的意思和完全的英文 Iaas:Infrastructure as a service    基础设施即服务 Paas:Platform as a service   平台 ...

  8. ie烦人的bug篇

    好多公司都不支持ie6了,基本都是ie8+,就连jq新版本也宣布放弃低版本ie,就不用说那些框架了,不过想用兼容ie的angularjs可以用我司徒大神写的avalon,个人感觉avalon也是比较好 ...

  9. kafaka quickstart

    http://kafka.apache.org/ http://kafka.apache.org/downloads cd /root/kafuka/kafka_2.12-0.11.0.0 nohup ...

  10. A1006. Sign In and Sign Out

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...