浏览器开发者工具打开检测

浏览器,开发者,工具,打开,检测 · 浏览次数 : 60

小编点评

## 内容宽度总结方法一: console.log方法 使用`console.log(temp)`打印的`temp`变量会在控制台触发两次toString方法,导致重复输出“\”。可以重写`toString`方法,检测控制台打开状态。 ```javascript let count = 0; const temp = () => {} temp.toString = () => { count++; return "\"\"" } console.log(temp); alert(count) if (count >= 2) { alert('打开了开发中工具') } ``` ## 方法二: debugger 在控制台打开的情况下,`debugger`会触发`debugger`方法,并通过比较`Date.now()`的值来判断是否打开了控制台。 ```javascript function detectDebug() { const date = Date.now(); debugger; // 你的手不可能快于0.1秒 if (Date.now() - date > 100) { alert('打开了控制台') } } detectDebug() ``` ## 方法三: console.table 在控制台打开的情况下,使用`console.table`方法可能会比较耗时,因为它会对大对象数组进行比较。 ```javascript let tableConsumeTime = calculateTime(() => console.table(arr)); let logConsumeTime = calculateTime(() => console.log(arr)); console.clear() alert('logPrintTime:' + logConsumeTime) alert('tablePrintTime:' + tableConsumeTime) if (tableConsumeTime > logConsumeTime * 10) { alert('打开了控制台')} ``` ## 方法四: 内容宽度 在控制台打开的情况下,页面展示的内容会被侵占,因此可以使用`window.outerWidth - window.innerWidth`来判断是否打开了控制台。 ```javascript function check(){ let screenRatio = window.devicePixelRatio if(!screenRatio && window.screen.deviceXDPI && window.screen.logicalXDPI ){ screenRatio = window.screen.deviceXDPI / window.screen.logicalXDPI } const widthFlag = window.outerWidth - window.innerWidth * screenRatio > 200; const heightFlag = window.outerHeight - window.innerHeight * screenRatio > 300; if (widthFlag || heightFlag) { alert('打开了控制台') } } check() window.addEventListener('resize', () => { setTimeout(() => { check(); }, 1000); }, true); ```

正文

目录

方法一console.log

在safari中,如果打开了控制台,console.log打印日期实例、函数实例、正则实例会触发两次toString方法,那么可以重写toString方法检测是否打开了控制台。

let count = 0;
const temp = () => {}
temp.toString = () => {
  count++;
  return "";
}
console.log(temp);
alert(count)
if (count >= 2) {
  alert('打开了开发中工具');
}

在safari中,如果打开了控制台,console.logdom节点的时候会触发dom节点上id的getter方法,通过自定义这个getter方法来检测是否打开了safari的控制台。

const ele = document.createElement("a");
Object.defineProperty(ele, "id", {
  get: () => {
    alert('打开了开发中工具')
  },
});
console.log(ele)

在Firefox中,如果打开了控制台,console.log正则时候会触发正则的toString方法,那么可以重写toString方法来检测是否打开了控制台。(适用于火狐浏览器, 不适用于chrome safari edge)


const temp = /\./
temp.toString = () => {
  alert('打开了开发中工具');
  return "";
}
console.log(temp);

方法二: debugger

debugger只有在打开控制台的情况下才会触发,而人的手动跳过断点又没有那么快,这中间就有了个时间差,依据这个时间差来判断是否打开了控制台

function detectDebug() {
  const date = Date.now();
  debugger;
  // 你的手不可能快于0.1秒
  if (Date.now() - date > 100) {
    alert('打开了控制台')
  }
}
detectDebug()

方法三:console.table

控制台打开的情况下,console.table的参数如果是一个大对象数组,会比较耗时,而console.log耗时和console.table的耗时差了个量级,通过对比两者的耗时来确定是否打开了控制台。

通过测试总结,如果console.table的耗时超过 console.log的十倍可以确定打开了控制台。

// 创建一个大的数组对象
function createArr() {
  const obj = {};
  for (let i = 0; i < 200; i++) {
    obj[i] = i;
  }
  const arr = [];

  for (let i = 0; i < 100; i++) {
    arr.push(obj);
  }

  return arr;
}

let arr = createArr();

function calculateTime(func) {
  const start = Date.now();
  func();
  return Date.now() - start;
}
// 时间耗时
const tableConsumeTime = calculateTime(() => console.table(arr));

const logConsumeTime = calculateTime(() => console.log(arr));

console.clear()
alert('logPrintTime:' + logConsumeTime)
alert('tablePrintTime:' + tableConsumeTime)

if (tableConsumeTime > logConsumeTime * 10) {
  alert('打开了控制台')
}

方法四:内容宽度

当控制台打开状态下,页面的展示内容是被侵占的,所以可以使用window.outerWidth - window.innerWidth 宽度差来确定是否打开了控制台

有一些情况需要考虑:

  1. 页面缩放会影响window.innerWidth
  2. iframe的window.innerWidth是自己的宽度,而不是顶层页面的宽度
  3. 360浏览器等会有一个边栏放置一些功能菜单,这时候就要将这个差值考虑在内。
  4. 新版chrome浏览器的收藏夹和阅读清单可以在右侧打开一个菜单栏,这个菜单栏也会占用内容区域。
function check(){
  let screenRatio = window.devicePixelRatio

  if(!screenRatio && window.screen.deviceXDPI && window.screen.logicalXDPI ){
    screenRatio = window.screen.deviceXDPI / window.screen.logicalXDPI  
  }

  const widthFlag = window.outerWidth - window.innerWidth * screenRatio > 200;  
  const heightFlag = window.outerHeight - window.innerHeight * screenRatio > 300;  
  if (widthFlag || heightFlag) {
    alert('打开了控制台')
  }
}
check()
window.addEventListener('resize', () => {
  setTimeout(() => {
    check();
  }, 1000);
}, true);

总结

  1. 优先使用方法一,可以在safari firefox中起作用
  2. chrome中使用方法二
  3. 如果禁用了debugger,可以使用方法三,不过方法三属于经验总结,并不一定准确,可能会误判。
  4. 方法四误判的概率更大,如果可以确定目标浏览器,则可以针对性的使用。

与浏览器开发者工具打开检测相似的内容:

浏览器开发者工具打开检测

目录 方法一console.log 方法二: debugger 方法三:console.table 方法四:内容宽度 总结 方法一console.log 在safari中,如果打开了控制台,console.log打印日期实例、函数实例、正则实例会触发两次toString方法,那么可以重写toStri

提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件

Chrome插件,官方名称extensions(扩展程序);为了方便理解,以下都称为插件。 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开开发者模式。点击"加载已解压的拓展程序,选择项目文件夹,就可将开发中的插件加载进来。 插件是基于We

将传统应用带入浏览器的开源先锋「GitHub 热点速览」

现代浏览器已经不再是简单的浏览网页的工具,其潜能正在通过技术不断地被挖掘和扩展。得益于 WebAssembly 等技术的出现,让浏览器能够以接近原生的速度执行非 JavaScript 语言编写的程序,从而打开了浏览器的“潘多拉魔盒”。

如何在浏览器中导入Excel表格插件(上)

本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言|问题背景 作为一名优秀的打工人,Excel是大家上班中必不可少的办公软件。随着互联网时代的到来,越来越多的公司开始使用各种B/S系统来处理表格数据文件。那么有没有

如何在浏览器中导入Excel表格插件(下)

本文由葡萄城技术团队于博客园原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 前言 | 问题背景 作为一名优秀的打工人,Excel是大家上班中必不可少的办公软件。随着互联网时代的到来,越来越多的公司开始使用各种B/S系统来处理表格数据文件。那么有

浏览器DevTools使用技巧

我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:正则 作为一名前端开发人员,平时开发中使用最多的就是 Chrome devtools,但可能很多同学像我一样平时用的最多也就 Console、Elements

一款免费的响应式界面调试工具

不知道大家平时开发响应式前端代码是如何调试的?是不是也跟我一样,通过浏览器的开发者工具来切换不同的界面尺寸来看验证效果呢? 可能是因为习惯了,平时就不停的切换不同尺寸来看效果。直到TJ君看到今天要推荐的这个免费工具,我才发现之前的调试方式好傻... 使用体验 下面,我们还一起来看看今天要推荐的这款名

鸿蒙HarmonyOS实战-Web组件(请求响应和页面调试)

前言 请求响应是指客户端发送请求给服务器,服务器接收到请求后返回的响应。响应包含了服务器处理请求的结果,并将结果返回给客户端。 页面调试是指在开发过程中,通过调试工具分析页面的运行状况,查找问题和修复错误。常用的页面调试工具包括浏览器的开发者工具和调试插件,可以检查页面的网络请求、HTML代码、

[转帖]15 个必须知道的 chrome 开发工具技巧

在Web开发者中,Google Chrome是使用最广泛的浏览器。六周一次的发布周期和一套强大的不断扩大开发功能,使其成为了web开发者必备的工具。你可能已经熟悉了它的部分功能,如使用console和debugger在线编辑CSS。在这篇文章中,我们将分享15个有助于改进你的开发流程的技巧。 一、快

21.3K star!推荐一款可视化自动化测试/爬虫/数据采集神器!功能免费且强大!

大家好,我是狂师! 在大数据时代,信息的获取与分析变得尤为重要。对于开发者、数据分析师乃至非技术人员来说,能够高效地采集网络数据并进行分析是一个强有力的工具。今天,我要向大家推荐的是一款功能强大、操作简单且完全免费的数据采集工具——EasySpider。 一个可视化浏览器自动化测试/数据采集/爬虫软