如何定位网页中class为icon icon-insecure-site元素的来源

你提供的相关元素代码如下：

<!-- 代码片段1 -->
<div class="icon icon-insecure-site"
        jseval="updateIconClass(this.classList, iconclass)"
        jstcache="2"></div>

<!-- 代码片段2 -->
<div class="icon icon-insecure-site"
        jseval="updateIconClas (this.classList, iconclass)"
        jstcache="2"></div>

可按照以下步骤依次排查：

• 第一步：通过开发者工具样式面板直接定位样式定义
  选中该div元素后切换到「样式」标签页，所有作用在icon、icon-insecure-site类上的CSS规则都会明确标注来源文件和行号，点击标注即可直接跳转至定义位置，如果样式是JS动态注入的，来源会显示为injected stylesheet，可以对应排查注入逻辑。
• 第二步：全局搜索关键字匹配所有关联文件
  打开开发者工具「源代码」面板，使用全局搜索功能（Windows/Linux按Ctrl+Shift+F，Mac按Cmd+Opt+F），搜索icon-insecure-site关键字，所有CSS、JS、模板文件中包含该字符串的位置都会被检索出来，不管是写死的样式还是动态生成的类都能覆盖到。如果是生产环境打包压缩后的代码，建议先开启sourcemap后再检索，更容易定位到原始源码的位置。
• 第三步：排查动态修改类名的JS逻辑
  代码中jseval属性绑定了updateIconClass函数，大概率是这个函数在运行时动态修改了元素的类名，直接全局搜索updateIconClass函数的定义，查看类名赋值逻辑，同时可以观察传入的iconclass变量的赋值来源，确认icon-insecure-site是不是通过变量动态传入的。
• 第四步：排查模板渲染逻辑
  元素上的jstcache属性说明该元素由JS模板引擎渲染生成，你可以去对应项目的模板文件目录中检索该类名，确认是模板中写死的固定类，还是渲染时根据页面状态动态绑定的类。

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