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. POJ 1966 Cable TV Network (算竞进阶习题)

    拆点+网络流 拆点建图应该是很常见的套路了..一张无向图不联通,那么肯定有两个点不联通,但是我们不知道这两个点是什么. 所以我们枚举所有点,并把每个点拆成入点和出点,每次把枚举的两个点的入点作为s和t ...

  2. Edge Deletion CodeForces - 1076D（水最短路）

    题意: 设从1到每个点的最短距离为d,求删除几条边后仍然使1到每个点的距离为d,使得剩下的边最多为k 解析: 先求来一遍spfa,然后bfs遍历每条路,如果d[v] == d[u] + Node[i] ...

  3. HTTPserver v3.0 版本项目

    项目介绍 模拟使用 socket  多线程 / io多路复用 实现一个简单的 httpserver 和 webframe 交互的项目程序 期望可以实现简单的 以 http 协议为标准的 和浏览器 / ...

  4. 解决nginx发布网站跨目录访问

    解决nginx发布网站跨目录访问(thinkphp5+lnmp) 到:usr/local/nginx/conf/vim fastcgi.cof 把最后一行加上井号#注释掉保存重启 restart 参考 ...

  5. MT【306】圆与椭圆公切线段

    已知椭圆方程$\dfrac{x^2}{4}+\dfrac{y^2}{3}=1$,圆方程$x^2+y^2=r^2,(3<r^2<4)$,若直线$l$与椭圆和圆分别切于点$P,Q$求$|PQ| ...

  6. Hyper-V 配置虚拟网络

    Hyper-V功能异常强大,不了解的自行GG 本文介绍如何使用Hyper-V在本机建立虚拟网络,创建虚拟交换机 打开Hyper-V Manager,选择右边侧边栏的Virtual Switch Man ...

  7. JS日期选择器

    浏览器自带 浏览器自带日期控件,使用<input type="date">时,点击后会弹出. 1:EDGE 2:火狐 3:谷歌  三种都不一样.略胜于无 练习 模仿火狐 ...

  8. docker-compose.yml(2)

    实例2:version: '3'services: user-service: image: "$DOCKER_SERVICE_IMAGE_TAG" network_mode: & ...

  9. 使用指针来实现变长数组（VLA）

    实现代码: #include <cstdio> #include <cstdlib> void usePtoImplementVLA(int SIZE) { scanf(&qu ...

  10. Typescript学习笔记（四）class 类

    typescript的类,与c#,java等语言的类类似.也是包含了一大部分的es6的实现.我会用最通俗的语言讲一下对coding有用的地方. class Greeter { greeting: st ...