览器加载一个js脚本，会在devtools中留下各种痕迹，elements中的script元素，console中的日志，source中的代码，network中的网络请求等

elements

这个比较简单，插入js的时候设置好id，在js中删掉自身就好了

<script id="xxx">
    // todo
    document.getElementById("xxx").remove();
</script>

对于引用js

<script id="xxx" src="a.js"></script>

// a.js
document.getElementById("xxx").remove()

对于动态加载的js也是一样的

<script>
    let e=document.createElement("script");
    e.id="xxx";
    e.src="a.js";
    document.head.appendChild(e);
</script>

// a.js
document.getElementById("xxx").remove()

或者也可以这样

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
    e.remove();
</script>

虽然看起来很奇怪，但a.js确实能执行，似乎是加载a.js时阻塞了脚本执行，执行完a.js之后再remove

console

clear就好了

console.clear()

source

直接引用和动态加载都会在source中出现

<script src="a.js"></script>

<script>
    let e=document.createElement("script");
    e.src="a.js";
    document.head.appendChild(e);
</script>

这样都是不行的，经过测试发现动态插入js代码时不会被记录在source中

<script>
    fetch("a.js").then(resp => {
        return resp.text()
    }).then(text => {
        let e = document.createElement("script");
        e.innerHTML = text;
        document.head.appendChild(e);
    })
</script>

这样a.js就不会出现在source里了

network

常规HTTP/WebSocket都会被记录，无法绕过，但是WebRTC不会，WebRTC可以基于UDP/TCP传输，WebRTC提供createDataChannel API，可以用于传输文本，那么就可以实现network隐藏加载

考虑WebRTC需要传递offer和icecandidate，还是得通过HTTP/WebSocket传输，而且复杂网络环境下还需要使用或部署STUN/TURN服务器，稳定性有待考虑

WebRTC技术可以参考学习我最近看的几篇文章透明日报20200801期

其他的方法我还没有找到，技术不行就社会工程

一个思路是可以伪装成其他流量混过去，比如png

<script>
    fetch("a.png").then(resp => {
        return resp.text()
    }).then(text => {
        let e = document.createElement("script");
        e.innerHTML = text;
        document.head.appendChild(e);
    })
</script>

然后在delvtools里也看不出来

另外一个思路是devtools目前只在打开的时候记录network数据，那么只要在devtools关闭的时候加载资源，打开就不加载，这样就不会出现在network里了

新的问题又出现了，如何检测devtools的状态，网上已经有不少公开技巧了

https://github.com/sindresorhus/devtools-detect

https://github.com/AEPKILL/devtools-detector

最后

还可以在哪里找到加载和执行痕迹呢

还有什么方法可以隐藏这些痕迹呢

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671还有大牛整理的一套高效率学习路线和教程与您免费分享，还有许多大厂面试真题。希望能够对你们有所帮助。

下代码来源 https://tobiasahlin.com/spinkit/

为了怕源文件删除，我抄录了几个.....

1、加载方块(是我喜欢的效果)

//html
<div class="spinner"></div>
//css
.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

2、追逐效果

//html
<div class="sk-chase">
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
</div>
//css
.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; 
  animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes sk-chase {
  100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); } 
}

@keyframes sk-chase-dot-before {
  50% {
    transform: scale(0.4); 
  } 100%, 0% {
    transform: scale(1.0); 
  } 
}

3、圆