如何查找Paradigm Shift模板绘制背景线条的对应代码段

你在CSS里找不到对应样式、检查元素也选不中目标，本质是这个模板的深色背景线条根本不是靠静态CSS实现的，绝大多数情况是JS驱动Canvas动态绘制、或者JS运行时插入SVG生成的，静态翻CSS文件当然找不到，按下面的步骤操作很快就能定位：

• 优先排查Canvas绘制逻辑
  打开Chrome DevTools，按Ctrl+Shift+F（Mac端按Cmd+Opt+F）调出全项目全局搜索框，直接搜索Canvas绘图相关API关键词：strokeStyle、lineTo、beginPath。所有JS绘制线条的逻辑一定会调用strokeStyle定义线条颜色，找到对应代码段后直接修改后面跟的色值即可。

  补充：原版采用CC协议发布的Paradigm Shift模板，背景线条就是Canvas实现的，对应代码一般在assets/js/main.js的页面初始化逻辑里，搜索半透明深色值比如rgba(0,0,0,0.08)可以直接命中目标代码段。

• 其次排查动态插入的SVG背景
  如果搜Canvas API没命中，就继续全局搜索SVG相关关键词：stroke=、<line、<path。部分二次定制的模板版本会把线条装饰做成内联SVG，通过JS在页面加载时插入到z-index为负的固定定位背景层，SVG标签上的stroke属性值就是线条颜色。
• 补查容易漏看的CSS实现场景
  切到Elements面板，依次选中<html>、<body>以及id/class带bg、decor、overlay关键词的固定定位元素，不要只看Styles面板，直接切到Computed计算样式面板搜索background，查看是否是多层线性渐变linear-gradient叠加生成的线条；同时别忘了检查上述元素的::before、::after伪元素样式，很多细线条装饰会写在伪元素里，常规点选元素很容易漏看。
• 快速定位小技巧
  打开DevTools右上角三点菜单，在More tools分类里找到Rendering面板，勾选Paint flashing后刷新页面，最先高亮闪烁的块就是最底层的背景绘制层，直接点击对应高亮DOM节点即可，不用手动逐层翻DOM树。如果定位到Canvas相关代码，可以在strokeStyle那行打个行断点，刷新页面触发断点时就能直接确认当前代码是不是控制你要修改的深色线条。

内容的提问来源于stack exchange，提问作者Girolamo