天小胖在coding的时候，遇到一个问题，就是要使用一个动态的文本作为div的背景，想着使用绝对定位堆叠来实现，或者伪元素实现，终归不够优雅，直到看到张鑫旭大佬的这篇文章，只能说，很当优雅！

在实际开发中，有时候希望文字内容可以作为背景图片显示，一方面是希望利用背景图片的优势，例如可以平铺，另外一方面是常见的替换元素不能使用伪元素创建文字，此时只能寄希望与背景图。

关键如何把文字变成背景图呢？

通常CSS开发人员的做法是把文字导出来转换成图片，然后作为背景图显示，但是这样成本有些高，也不利于日后的维护。

这里给大家介绍一种实用的技术，可以让文字作为CSS背景图片。

一、SVG本质上就是一个图像

SVG虽然是XML语言构成的，但是本质上就是一个图像，是可以作为图像使用的，例如：

<img src="zhangxinxu.svg">

此时的zhangxinxu.svg就是一个图像，同样的，也可以作为背景图显示，例如：

.example {
    background: url(zhangxinxu.svg);
}

但是，这里的SVG文件都是独立的SVG文件，和把文字导出成PNG图片没有任何区别，根本没有意义嘛！

对的，请不用急，是这样的，SVG作为一个矢量图像，和通常的位图有一点不一样，那就是SVG图像可以直接以源代码的方式内联在Web页面中。

关于这个特性，可以参考我之前的这篇文章：“学习了，CSS中内联SVG图片有比Base64更好的形式 ? 张鑫旭-鑫空间-鑫生活”。

例如下面是一段显示文本的SVG代码：

<svg xmlns="http://www.w3.org/2000/svg">
    <text>文字内容</text>
</svg>

是可以直接作为background-image使用的，例如：

.by-zhangxinxu {
    background-image: url('<svg xmlns="http://www.w3.org/2000/svg"><text>文字内容</text></svg>');
}

由于安全性限制，目前需要对部分字符进行转义，因此，实际的CSS代码是这样的：

.exmaple {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext%3E文字内容%3C/text%3E%3C/svg%3E");
}

相比PNG图像的文字背景，使用SVG内联的好处在于，我们可以轻松修改文字的内容，同时我们可以随意设置文字的字号大小，颜色、描边效果等等。

但是，每次都手写一段SVG代码好难哦，尤其很多前端小伙伴对SVG并不是很熟悉。

不要紧，考虑到这种情况存在，我专门做了一个生成SVG文字背景图的工具。

二、SVG文字背景图生成工具

您可以狠狠地点击这里：文字转SVG图像在线转换工具 ? 张鑫旭-鑫空间-鑫生活

界面截图示意如下：

最上面是配置区域，可以设置作为背景的文字内容，可以设置文字的颜色、透明度以及位置等信息。

中间是代码区，左侧是原始SVG，可以点击图标下载SVG文件到本地；右侧是转义的可以直接内联使用的SVG代码，HTML和CSS中均可内联使用。

最下面是预览区域。

如果需要其他配置项

实际开发中的需求是千变万化的，工具目前内置的配置项不一定能覆盖所有的场景，此时可以这么处理，直接修改左侧文本域中的SVG代码，此时右侧的转义SVG代码会自动同步，例如，如果我们希望背景文字带有旋转效果，这样可以作为水印图片使用，则可以在已经生成的SVG代码中的元素上设置45度旋转相关的代码。

一种方法是直接在<svg>元素上设置传统DOM元素的CSS style设置，例如：

另外一种方法就是<text>元素上使用SVG元素自动的transform属性进行设置，但是SVG中的transform变换坐标和CSS是很不一样的，直接<text transform="rotate(-45)">是不会有预期的旋转效果的，因为默认SVG的变换中心点是左上角，因此，设置transform="rotate(-45)"会让文字不可见。

关于SVG的transform变换坐标体系可以参考我之前写的这篇文章：“理解SVG transform坐标变换”

<text>元素也能围绕中心点变换有2个方法，一种是使用translate()函数先偏移、然后再旋转，然后在偏移复原，这种方法啰嗦了一点，另外一种方法就是使用SVG中rotate()函数的可选参数，也就是第2个参数，就是可以指定旋转的中心点坐标，这个特性SVG独有，Canvas中是没有的。

代码演示如下截图所示：

其中，可以看到专门设置了SVG元素的width宽和height高，因为如果不设置，按照目前的CSS background-size的尺寸渲染规范，SVG的尺寸会采用容器的尺寸，rotate()函数的第2个参数就需要设置为容器元素的宽高的一半才能让文字居中旋转。

更新于 2022-01-25

dominant-baseline="middle" 只是近似垂直居中，如果 SVG 图片高度较小，会看到往上偏移了一点距离，此时可以试试修改为 dominant-baseline="central"。

三、文字背景图应用案例

这里抛砖引玉，举几个使用文字作为背景图的例子。

1. 水印

例如为防止截图，会给页面，或者聊天软件背景等增加文字水印。

以前几乎都是通过生成一个专门的PNG图片实现，现在可以直接代码内联，例如点击下面这个按钮，大家就可以看到我这篇文章的实时水印效果了。

不要害怕，用力点击我

相关CSS代码如下所示：

.target {
    background: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill-opacity='0.5' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3Ezhangxinxu.com%3C/text%3E%3C/svg%3E");
}

截图效果如下所示：

2. 输入框其他位置的占位符提示效果

常规的占位符都是在输入框的左上方，或者右上方，如果我们希望提示的占位符在右下角，则就可以使用这里的文本图像技术实现。

比方说下面这个多行文本域输入框，当你输入内容，右下角的提示内容就会消失，没有内容的时候就又会显示（实时效果，可以亲自体验下）。

相关HTML和CSS代码如下所示：

<textarea class="custom-placeholder" required></textarea>

.custom-placeholder {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='100%25' y='96%25' font-size='12' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='end'%3E富强民主文明和谐美丽%3C/text%3E%3C/svg%3E") no-repeat right 10px bottom 5px;
}
.custom-placeholder:valid {
    background: none;
}

因为这里的文本是右对齐，下对齐，因此，设置text-anchor属性值是end，同时x, y属性值都是100%或者接近100%。

3. 视频无法播放提示

HTML5 <video>元素中的视频如果因为地址错误等原因无法播放，是没有办法像普通元素那样写入一段错误提示文字，因为<video>元素是替换元素，写在标签里面的内容都会被忽略。

此时，可以让视频播放出错的时候以背景图的形式显示文字就可以了。

比方说下面这个实时例子，就是一个故意写错了地址的MP4视频，大家可以看到“视频无法预览”的白色提示文字，就是使用这篇文章提供的技术实现的。

相关代码如下所示：

<video src="xxx.png" type="video/mp4" width="360" height="240" onerror="this.classList.add('error')"></video>

video.error{
    background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23ffffff' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E视频无法预览%3C/text%3E%3C/svg%3E") no-repeat center;
}

简单易懂体验绝佳老少皆宜。

四、总结一下

如果想让文字内容直接作为背景图片显示，可以使用SVG元素作为中间桥梁实现。

关键问题是SVG元素的获得不太容易，因此，我就专门给大家开发了一个工具，通过简单配置实现想要的CSS文字背景代码。

同时介绍了如果通过修改左侧输入框得到自定义的文字背景效果。

最后，介绍了3个具有代表性的案例，展示了文字作为背景图片的一些妙用，抛砖引玉，希望可以启发大家在实际开发中的应用。

OK，技术本身并不难，难的是当遇到类似场景的时候可以想到可以直接使用代码实现，而不是导出图片。

好，以上就是本文的全部内容，感谢您的阅读，如果您觉得本文内容还挺有帮助的，欢迎分享。

本文转自张鑫旭大佬的分享，原文地址：如何让文字作为CSS背景图片显示？ ? 张鑫旭-鑫空间-鑫生活，张大佬经常分享一些很不错的css idea，推荐大家经常刷刷他的博客，他的书也不错，大家也可以买来读一读！

们可能看到过这样的一个效果：页面中的内容滚动穿过某个固定元素时，会产生虚化的视觉效果，能看出文字的轮廓，但是却无法看到具体的内容，给人一种哎呦？不错哦的感觉。

我们来拿element-plus官网作为案例，看看它是如何实现的，然后我们再自己照着实现一版。

比如正常的文字显示是这样的：

虚化之后看起来是这个样子：

这个是element-plus官网中首页的效果，顶部有一个固定高度的头部横条，当页面滚动的时候，横条下面的文字就会显示成上面图中虚化后的样子。

首先来分析一下，如果是我们自己实现一个这样的效果，该怎么做呢？看来这个头部横条不能是一个纯白色的背景，因为要能看到文字，所以应该要有一个透明度，但是不能完全透明，因为它看起来不是那么的黑，然后我们观察到有毛玻璃的效果，所以我们要给它模糊一下。

先来做一个最初的原图，在这个基础上尝试几种方案：

从上面的分析中我们可以知道，主要的手段就是：背景+模糊。

我们先来用第一种方案做一下：背景透明度+模糊

它的代码非常简单

{
  background-color: rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
}

我们可以通过背景透明度和模糊的程度来调整视觉效果。

其中vite的官网就是这样实现的，只是参数有所改变，我们来看下它的效果和代码：

{
  backdrop-filter: saturate(50%) blur(8px);
  background: rgba(255,255,255,.7);
}

我们再看elemen-plus官网中的第二种方案：背景图+模糊

它的代码也很简单，我们可以对它简单的分析一下。

{
  background-image: radial-gradient(transparent 1px,#ffffff 1px);
  background-size: 4px 4px;
  backdrop-filter: saturate(50%) blur(4px);
}

这里用到了径向渐变，径向渐变默认从中心向外扩散，其中transparent和#ffffff表示从透明过渡到纯白，两个1px的作用就是在1px处直接从透明变为白色，不产生渐变的过渡效果，因此从中心到1px距离处都是透明的，也就是半径为1px的圆内都为透明色，从1px之外都是显示成白色，它这里在实现的时候使用了单位区域4px的大小来绘制背景，然后通过背景重复的方式来平铺整个元素。

可以这样来理解，单位区域内，透明色为半径是1px的圆的范围，那么直径就是2px，为了分布平均，因此左右和上下都加上了1px的纯白，我们来设定一下background-repeat为no-repeat，看一下单位区域的效果，为了明显我们把颜色改一下：

这就是单位区域在页面中左上角显示的样子，红色就是原来的透明色，黑色就是原来的白色，为了看得明显，我把页面放大了500%，如果我把背景设置为重复：

可以看到就是这个样子，因此它后面的文字就会有一部分通过透明区域显示出来：

这个时候我们再加上模糊效果，那么就会显示成官网中的样子了。

那么还有没有其他的方法呢？

有！思路跟第二种类似，只不过我们不用径向渐变，而是使用线性渐变。

我们可以看到，径向渐变有误伤的像素，4px的大小会覆盖两个像素点，使我们看不见后面的文字，而且圆形不能使文字完全露出来。

最好是一个像素看不见，一个像素能看见，这样就像蒙了一层纱布一样均匀。

要想实现这样的效果，我们首先把单位区域设置成2px大小的正方形，然后借鉴一下CSS3 Patterns Gallary的鬼斧神工：

我们通过设置透明色和黑色来展示样子，同样页面放大了500%。代码如下：

{
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
}

我们再把背景重复一下：

这样就变成了一个透明像素一个黑色像素。我们把黑色变成白色再看实际的文字显示：

可以看到，文字就好像每隔一个像素点都被掏空了一样。

然后我们再加上之前用到的模糊，调整一下视觉效果：

这样就有了毛玻璃叠加纱布的视觉效果。完整代码如下：

{
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
  backdrop-filter: blur(4px);
}

原理不难，技术也是很简单，都是一些好玩的css特性，实现的方式也很多。

创造力是无穷的，就看谁的花样多！

我们开发系统的时候，可能会接到这样的需求：不要让用户复制页面上的文字或者图片，不要让用户调试我们的页面，更甚至也不要让用户进行打印操作等等。

听起来是不是让人很头大，这咋实现啊？这有必要吗？这能禁住么？

如果你没做过这些，或者没接到过这样的需求，那你也应该看到过某个网站做了一些这样的措施。

既然要做，我们就得想方案，先来看看禁止复制都有哪些方法。

禁止复制

假设我们有这样一段代码：

<div style="padding-left: 56px;">
  <textarea rows="5" cols="33"></textarea>
</div>
<pre>
  海客谈瀛洲，烟涛微茫信难求，

  越人语天姥，云霞明灭或可睹。

  天姥连天向天横，势拔五岳掩赤城。

  天台四万八千丈，对此欲倒东南倾。

  我欲因之梦吴越，一夜飞度镜湖月。

  湖月照我影，送我至剡溪。
  </pre>

接下来就通过这个例子来论述我们的方案：

1. 通过user-select:none

这是一个css属性，标识了元素及其子元素的文本不可被选中，因此设定之后，文本将不能够被选中，因此也就不能复制：

<pre style="user-select: none;">
  海客谈瀛洲，烟涛微茫信难求，

  越人语天姥，云霞明灭或可睹。

  天姥连天向天横，势拔五岳掩赤城。

  天台四万八千丈，对此欲倒东南倾。

  我欲因之梦吴越，一夜飞度镜湖月。

  湖月照我影，送我至剡溪。
  </pre>

我们在这段文本上，加上这个样式。

可以看到，文字压根就不能选择，从鼠标形状也能看出来。

2. 通过拦截copy操作

由于用在进行复制操作的时候，会触发copy事件，我们可以通过监听它来做一些处理，使得复制的行为发生改变：

<div>
  <div style="padding-left: 56px;">
    <textarea rows="5" cols="33"></textarea>
  </div>
  <pre id="content">
    海客谈瀛洲，烟涛微茫信难求，

    越人语天姥，云霞明灭或可睹。

    天姥连天向天横，势拔五岳掩赤城。

    天台四万八千丈，对此欲倒东南倾。

    我欲因之梦吴越，一夜飞度镜湖月。

    湖月照我影，送我至剡溪。
  </pre>
</div>
<script>
  let c=document.getElementById('content')
  c.removeEventListener("copy", copyFilter)
  c.addEventListener("copy", copyFilter)
  function copyFilter(e) {
    let cp=e.clipboardData || window.clipboardData
    if(!cp) {
      return
    }
    let text=window.getSelection().toString()
    if(text) {
      e.preventDefault()
      cp.setData("text/plain", "你复制了一段魔法")
    }
  }
</script>

先获取到我们要禁止复制的元素，然后给它添加一个copy的事件监听，在添加监听之前，要先移除一下，这样是为了避免局部刷新的时候重复添加，然后我们通过copyFilter函数来对这次操作进行处理。

先获取剪贴板对象，如果当前事件对象里不存在，那就从window里面取，然后我们通过getSelection再拿到选取的内容，因为我们对剪贴板对象进行修改，所以要阻止默认行为，然后把剪贴板的内容重新赋值，可以是示例中那样的一段文字，也可以设置为空，甚至是任意其他内容，然后我们就可以看到产生的效果了：

虽然能复制文本，但是由于我们拦截了复制操作，更改了它的行为，因此再粘贴的时候就变成了我们更改的样子，也做到了禁止复制的功能。

这种方式对于使用快捷键或者右键的方式都是有效的。

3. 通过拦截cut操作

这种情况主要是在可编辑区域，比如文本框、文本域、设置为contenteditable的元素等，用户可以对文字进行剪切操作，虽然上面禁止了复制，但是剪切是另一个操作，不拦截的话还是相当于能复制出来。

copy和cut只是触发的事件不同而已，但是它们都是执行相同的逻辑处理：

<div>
  <div style="padding-left: 56px;">
    <textarea rows="5" cols="33"></textarea>
  </div>
  <pre id="content" contenteditable>
    海客谈瀛洲，烟涛微茫信难求，

    越人语天姥，云霞明灭或可睹。

    天姥连天向天横，势拔五岳掩赤城。

    天台四万八千丈，对此欲倒东南倾。

    我欲因之梦吴越，一夜飞度镜湖月。

    湖月照我影，送我至剡溪。
  </pre>
</div>
<script>
  let c=document.getElementById('content')
  c.removeEventListener("cut", copyFilter)
  c.addEventListener("cut", copyFilter)
  function copyFilter(e) {
    let cp=e.clipboardData || window.clipboardData
    if(!cp) {
      return
    }
    let text=window.getSelection().toString()
    if(text) {
      e.preventDefault()
      cp.setData("text/plain", "你复制了一段魔法")
    }
  }
</script>

这里我为了方便，给元素添加了contenteditable属性，让它变成可编辑的，copyFilter函数没有变化，我们只是添加了一个剪切事件的监听，然后它们的处理函数都是copyFilter。看下效果：

可以看到，首先我们对文字进行剪切，没有出现预期的效果，这时因为我们在代码里面对剪切进行了拦截，并阻止了它的默认行为，然后我们在粘贴的时候，文字也改变成我们设置的了。

4. 通过媒体查询控制打印

虽然我们可以通过上面的几种方法禁止在页面上复制，但是用户也可能开启打印预览模式，在这种情况下，也是可以进行复制的，我们要想对打印页面进行一些控制，那么就要用到媒体查询，先看下打印的样子：

虽然我们做了限制，但是在打印页面没有生效，现在我们针对这个场景更改一下代码：

@media print {
  html {
    display: none;
  }
}

通过添加上面这个样式规则，我们能够使页面在打印的时候，内容隐藏起来，这样就无法进行复制了：

能够看到，点击打印的时候，预览页面一片空白，，这样就禁止了在打印页面进行复制的操作。当然了，你其实也可以设置其他的样式属性来做些控制，但要记住写在打印的媒体查询里面，只有这样才会在打印页面生效。

5. 通过伪元素覆盖内容

还有一种方式就是，通过设定一个伪元素，让它全面覆盖文本内容，这样鼠标就不能选到实际的文本，改造一下代码：

.content {
  position: relative;
}
.content::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
<pre id="content" class="content">
  海客谈瀛洲，烟涛微茫信难求，

  越人语天姥，云霞明灭或可睹。

  天姥连天向天横，势拔五岳掩赤城。

  天台四万八千丈，对此欲倒东南倾。

  我欲因之梦吴越，一夜飞度镜湖月。

  湖月照我影，送我至剡溪。
</pre>

现在就不能在元素上面选中文字了，不过用户也可能还有一些操作，比如在内容区域外面ctrl+a全选，或者在外面拖动鼠标来全选，如果是这种情形，那么我们可以通过监听键盘和鼠标事件来禁止全选等操作。

6. 通过监听鼠标和键盘事件

由于用户有很多种操作的方式，键盘全选、鼠标全选、键盘右键、鼠标右键等等，我们如果穷举的话，情况太多了，因此我们只监听鼠标按下和抬起事件，以及键盘的按下事件：

document.removeEventListener("mousedown", haveSelect)
document.addEventListener("mousedown", haveSelect)
document.removeEventListener("mouseup", haveSelect)
document.addEventListener("mouseup", haveSelect)
document.removeEventListener("keydown", haveSelect)
document.addEventListener("keydown", haveSelect)
function haveSelect() {
  window.getSelection().removeAllRanges()
}

主要就是在removeAllRanges方法上面，能够在触发上面事件的时候，将所选区域清空，也就是不管你选没选，咋选的，反正就是你只要进行了操作，那我就那可能选择的区域给你清空，这样你就啥也干不了了。

好，这样就可以啦，无论怎么选，即使出现了选区，但是只要你再按了鼠标或者键盘，那么选区就会直接消失，就能达到不能复制的效果，因为你发现啥都做不了。

这里额外说明一下，对于事件的监听，一定要用addEventListener来实现，因为它会将多个绑定的事件都添加上去，当触发的时候就会按照绑定的顺序进行执行，如果是用赋值的方式，那么后面的会覆盖前面的，而且赋值的方式很容易被篡改，可以很轻松的让你的绑定函数不能执行从而失效，而使用addEventListener就不会被人为覆盖，只能通过绑定的函数句柄来手动移除，也就是说要移除的时候，必须使用跟绑定时使用同一个函数才行。

通过CSS的方式禁止复制，可以很容易的被用户解除，只能是设置的稍微复杂一点，增加难度。而通过JS的方式禁止复制，也可以通过禁用页面JavaScript代码来解除，因此我们可以将内容通过js来渲染，这样如果页面禁用了js，那么内容也不会渲染。

禁止调试

对于禁止调试，主要是指用户打开控制台，控制台也就是开发者工具，我为了方便称之为控制台，想要对页面进行调试时，我们做一些处理，阻止这种行为，最大可能的拦截通过控制台对系统的调试。
主要的方法有几种，由于打开控制台是浏览器提供的调试功能，因此我们没法拦截打开操作，即使通过事件监听不允许快捷键这样做，但是也可以通过其他方式进行打开，因此我们的主要关注点就在于打开控制台之后，我们能做哪些事情来限制用户行为。

1. 禁用快捷键

打开控制台的快捷键主要有F12和ctrl+shift+i，我们先把这俩给禁用了：

document.removeEventListener("keydown", disableDevShortcut)
document.addEventListener("keydown", disableDevShortcut)
function disableDevShortcut(e) {
  console.log(e)
  if(e.keyCode===123) {
    e.preventDefault()
  }else if(e.keyCode===73 && e.ctrlKey && e.shiftKey) {
    e.preventDefault()
  }
}

这样在使用这两个快捷键的时候，页面没有任何反应，控制台也不会唤起，因为我们阻止了它们的默认行为。

2. 禁用右键的检查功能

除了通过快捷键，还可以使用右键的方式，并点击检查也会调出控制台。

这种情景，我们可以通过禁止在页面上使用右键的方式，来阻止打开控制台：

document.removeEventListener("contextmenu", cancelContextmenu)
document.addEventListener("contextmenu", cancelContextmenu)
function cancelContextmenu(e) {
  e.preventDefault()
}

现在就不能通过右键打开控制台了，但是相应的整个右键功能也都不能使用了。

3. 设置无限断点

如果用户最终打开了控制台，比如通过在浏览器的更多功能中来打开的话，那么我就需要采取其他的措施，其中之一就是给代码设置无限断点，因为断点只在控制台打开的时候才会发生作用，从而不必担心非调试模式下的程序正常运行。

无限断点的主要思路就是利用定时器等手段，频繁的触发断点效果，使得不能轻松的调试程序，先看下代码：

;(()=> {
  function breakDebugger() {
    if(new checkDebugger().check) {
      breakDebugger()
    }
  }
  function checkDebugger() {
    const now=new Date();
    eval('(function () {debugger;false;})()')
    const dur=Date.now() - now
    if(dur < 5) {
      return {check: false}
    }else {
      return {check: true}
    }
  }
  setInterval(()=> {
    eval('(function () {debugger;true;})()')
    breakDebugger()
  }, 500)
})()

我们利用一个立即执行的自执行函数，来使我们的代码被封装在一个固定块内，不与其他部分有任何影响。

这里主要做了两步：

第一步设置一个重复执行的定时器，其中包括了一个断点和一个函数调用。

第二步通过函数来递归调用断点，主要使用了实例化对象的方式和时间差的判断。

这样做的主要作用就是在设置无限断点的同时，也能够让每次的断点都是被重新生成的，看下效果，一目了然：

发现没有，我们通过这种方式，只要打开了控制台，那么就会进入到无限断点的循环中，使得不能做任何其他事情，而且每个断点的生成都会开辟一个新的虚拟运行环境，这种情况下，只有关闭控制台，才能结束断点。

即使使用右键选择Never parse here，也毫无作用，虽然可以通过Deactive breakpoints按钮来彻底禁用断点，就是下面这个按钮：

但是，如果这样做的话，那么用户也就同时失去了调试其他代码的能力。

况且，我们接下来还会介绍其他的控制手段，可以配合着使用。

4. 监测控制台开启

我们如果能有一种手段，可以知道用户开启了控制台，换句话说只要控制台被打开，就通知我们或者被我们监测到，那么我们就可以执行一些控制手段，这种效果肯定是很理想的，遗憾的是还没有这种api暴露给我们去让我们能够这样做。

不过我们可以通过其他的方式，利用既有的一些能力来实现这一点，这里我还是使用循环定时器，来不断的去嗅探用户是否开启了控制台，直接看代码：

;(()=> {
  setInterval(function() {
    let foo=document.createElement('a')
    let a1=+new Date()
    console.table(foo)
    let a2=+new Date()
    if(a2 - a1 > 1) {
      location.href='about:blank'
    }
    console.clear()
  }, 500)
})()

同样，通过一个自执行函数，我们开启了一个循环定时器，然后在回调方法里面，我们就去实现上面的目标，也是分为了两步：

第一步创建一个a元素，然后通过表格的形式将它打印出来，并记录下消耗的时间。

第二步判断耗时的长短来控制是否跳转到空白页，然后清空控制台。

这种方式主要是利用了console.table的特性，它会将元素以表格的形式输出到控制台，大概就像下面的样子：

由于太多了，我就没有全部截下来，如果没有打开控制台的话，使用console.table输出我们创建的a标签是很快的，有多快呢，就是js执行一条语句的速度，所以打印a1和a2的时间间隔非常短，几乎为0，因为他们快到差不多是同时执行的，给大家打印看一下：

我们先不打开控制台，等输出完毕再打开，很清楚的发现，我们没打开控制台的时候，输出的a就是它标签，而且时间间隔是0毫秒。

现在我们打开控制台的时候刷新一下页面，看看控制台的输出：

这次就变成了以table的形式输出a元素，而且它的耗时明显增多，不再是0毫秒，而是耗费了10毫秒，虽然打开控制台的时候多次刷新页面，每次输出的毫秒数是不同的，但是跟关闭控制台的时候输出的耗时差距非常明显，因此我们就可以在这个上面做文章。

我在上面的代码中假定了，只要是大于1毫秒的耗时，那就表示用户打开了控制台，然后我们就把页面给跳转到空白页，当然了你也可以做一些任何你想做的操作，比如弹出一个提示，或者把body内容置空等等等等。

回到我们上面的代码，看一下它实际发生的作用和带给我们的效果：

哈哈，古德古德，平时浏览一切正常，只要刚一打开控制台，瞬间页面就被跳转走了，什么都干不了。这样我们就通过这种方式，达到了限制打开控制台的目的，也就是在当前页没法调试，一打开就跳转。

这种办法由于是绕路实现的，那么你可能会有疑问，它稳定吗？会不会误判，我可以对它绝对放心吗？

理论上来说，通过输出的执行时间是不太能精确掌握的，但是我们可以再做一些其他的措施来逼近真相：

;(()=> {
  setInterval(function() {
    let foo=document.createElement('a')
    let a1=+new Date()
    console.table(foo)
    let a2=+new Date()
    if(a2 - a1 > 1) {
      let time=0
      for(let i=0; i < 10; i++) {
        let a1=+new Date()
        console.table(foo)
        let a2=+new Date()
        time +=a2 - a1
      }
      if(time > 20) {
        location.href='about:blank'
      }
    }
    console.clear()
  }, 500)
})()

我又改造了一下判断的逻辑，当发现输出耗时为2毫秒甚至更多的时候，我立马再进行一次真伪判断，也就是说，万一由于其他的影响，导致我第7行的代码误判了，那么我再同步执行一个循环，连续输出10次，把他们的耗时总和计算出来，然后判断是否大于20毫秒，如果还是耗时过高的话，那么就可以非常肯定的知道用户是打开了控制台，这个时候就可以放心的做一些处理了。

最后

其实限制用户行为的方法有很多很多，上面列出了一些主要的，多种方法还是要结合着使用。你也可以自由发挥，多使用一些其他的手段，也会增加用户复制或者调试的难度，比如防止用户重写console的方法，或者清除所有定时器等。

甚至也可以将你的内容绘制到canvas上面来防止复制，多加一些js的处理工作，防止禁用js的时候，我们的代码不生效，只有在js可用的时候再去渲染内容等。也可以在综合考虑的情况下加上代码混淆、代码加密等措施。

话说回来，大家都是同路人，何必相互为难，哈哈哈，不过提这个需求的人也着实会为难我们，既然提了那就尽力去做，能做到什么程度，只能说是尽量做到极致。

希望上面的内容能够帮助到你，也希望能够对你有所启发。