一、Chrome 浏览器开发者工具简述
 
1.1 什么是浏览器开发者工具
 
       其实简单的说，浏览器开发者工具就是给专业的web 应用和网站开发人员使用的工具，它的
 作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本
 （JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手
 锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就
 是介绍我常用的三个浏览器。
 
1.2 浏览器开发者工具基本使用
 
 
 
      如何调出开发者工具：
 
      按F12 调出& 右键检查（或快捷键Ctrl+Shift+i）调出
 
 
 二、浏览器开发者工具面板说明 
 
      chrome 开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。爬虫这块用的比较多的是元素(ELements), 网络(Network).
 
 
 
       元素（Elements）：用于查看或修改HTML 元素的属性、CSS 属性、监听事件、断点等。css可以即时修改，即时显示。大大方便了开发者调试页面
        控制台（Console）：控制台一般用于执行一次性代码，查看JavaScript 对象，查看调试日志
 信息或异常信息。还可以当作Javascript API 查看用。例如我想查看console 都有哪些方法
 和属性，我可以直接在Console 中输入"console" 并执行
        源代码（Sources）：该页面用于查看页面的HTML 文件源代码、JavaScript 源代码、CSS 源代码，此外最重要的是可以调试JavaScript 源代码，可以给JS 代码添加断点等。
        网络（Network）：网络页面主要用于查看header 等与网络连接相关的信息。：网络页面主要用于查看header 等与网络连接相关的信息。
 
2.1 元素(Elements) 面板
 
       查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然
 后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素
 源代码的具体位置。
 
 
       用于定位元素，复制某类元素路径，这个在使用BS4 库,selenium 库时，选择定位器会用到!
 
 
      用于写XPATH 路径语言时使用! 
 
 
 
       可以更改浏览器显示方式! 使用手机或者其他设备! 也可以更改当前使用的设备的网络连接
 速度! 
 
2.2 网络(Network) 面板(1)
 
       Network 面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request 后分
 析HTTP 请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request 和
 Response 等），可以根据这个进行网络性能优化。该面板主要包括5 大块窗格：
 
 
 
      Controls 控制Network 的外观和功能。
 
      Filters 控制Requests Table 具体显示哪些内容。
       Overview 显示获取到资源的时间轴信息。
       Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
       Summary 显示总的请求数、数据传输量、加载时间信息。
 
其中用的比较多的是:Controls,Filter,Requests Table
 
 
       使用频率一般，在部分网站上抓取某些请求时使用! 有时需要选择Disable Cache, 不需要缓
 存。
 
 
       这个主要用来选择一些请求时用的！常用的俩选项XHR 和JS, 其他偶尔用用! 
 
笔记xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax 功能实现所依赖的对象，jquery中的ajax 就是对xhr 的封装。
 
 
       查看一些请求的名字，状态码，类型，大小和类型! 这个不是重点！重点是这个资源本身的
 一些属性! 
 
2.3 网络(Network) 面板(2)
 
       点击任意一个资源我们可以得到如下资源!
 
 
       这个主要用于查看这个请求的内容! 知道数据是否在这块放着! 
 
       主要用于查看某个资源是如何请求的, 请求头信息，请求体信息，响应体信息等等，下面会
 具体介绍! 这部分内容相对来说还是很重要的! 
 
 
       generel 主要用于查看请求的url 和请求方式，响应状态码，等信息，常用的就这四个! 
 
 
       Request Headers 请求头信息，里面信息很多，常用来做伪装浏览器使用，最常见的伪装方法就是使用User-Agent! 当然还有一些其他的伪装方法!
 
想了解更多爬虫可移步：Python网络爬虫教程详解.pdf_python网页爬虫教程-互联网文档类资源-CSDN下载
 

打开Chrome浏览器，按F12就可以进入开发者工具 
 
1.使用开发者工具编辑网页样式
 
在Elememts中调试HTML和CSS
 
（1）右上角的三个点，Dock side 可以选择调试工具窗口位置
 
  Ctrl+Shift+F可以全局搜索
 
 
点击左上角图标，可以在网页选择元素，调试工具会找到相应的html和css代码
 
 可以在html代码上直接双击，或右键选择Edit AsHTML编辑html代码。
 
 
点击+添加css，也可以直接在某个样式中进行编辑。 
 
 
点击颜色小方块，可以在颜色调试器中选择颜色，包括透明度调试，也可以用选色笔选择屏幕上的颜色，调好颜色后可以复制颜色代码。
 
 
 
2.调试JS代码
 
（1）JS调试工具介绍
 
在Sources中调试JS代码
 
可以看到左边是文件目录预览，中间是显示代码的位置，右边是调试工具。
 
可以使用Ctrl+p模糊搜索，打开文件。
 
 
1处三角可以设置代码暂停，其后一个按钮为跳过方法执行下一语句，下一个按钮是进入方法，再下一个是 跳出方法，如果不想让js一步步执行可以直接再点一次1处。鼠标悬停在变量上可以得到值。
 
左上角第三行代码设置了一个断点，在2处可以控制所有断点的开关
 
3处可以遇到压缩代码时，调整代码格式
 
 选中一个变量，右击->add to watch,点击1处第二个按钮执行下一步，可以实时监控循环里变量的变化。
 
如果想要跳出循环，可以在循环外设一个断点，点击1处恢复执行，程序就会在断点处停下。
 
 点击蓝色八边形，勾选Pause On Caught Exceptions,可以捕获catch块中的异常，并在异常代码处停下，不勾选不能捕获catch块中的异常，只能捕获其他的异常。
 
 （2）与后台对接错误调试
 
对于回调函数，可以在回调函数里设置断点，恢复运行，看服务器响应的值是否有错：
 
检查页面获取的值是否有错，把鼠标放在上面看值。
 
 
点击Network,看发送的值是否正确 
 
 
检查发送状态，200说明发送成功。 
 
 （3）事件监听断点
 
如果找不到js代码，如图，给相应的事件打上对勾后，就会给这个事件打上断点
 
 
 报错，点击红色小叉叉，可以看到红色的错误信息，复制进行百度。
 
 
3.模拟不同浏览器和移动端设备
 
 
 
选好之后刷新页面，看效果
 
还可以模拟移动设备
 
 
 
 

 在阅读下面内容之前，那么些简单的了解浏览器开发者工具到底是什么东西，到底有什么用途。
 
 浏览器开发者工具到底是什么？
 
 其实简单的说，浏览器开发者工具就是给专业的web应用和网站开发人员使用的工具，当然只要你有兴趣想要了解，只要你对这个世界充满这好奇，什么东西你都可以了解。
 
 开发者工具到底有什么用？
 
 它的作用在于，帮助开发人员对网页进行布局，比如HTML+CSS，帮助前端工程师更好的调试脚本（JavaScript、jQuery）之类的，还可以使用工具查看网页加载过程，获取网页请求（这个过程也叫做抓包），抓包是非常有意思的过程，而每一个浏览器厂商生产出来的浏览器都会有自己的杀手锏，也就是功能上的差别，那么这个时候你就找一个最适合自己的浏览器使用就可以，接下来就是介绍我常用的三个浏览器。
 
 一、谷歌浏览器chrom
 
 一般在windows系统上浏览器开发者工具打开都是按F12快捷键，但是今天我是用mac进行讲解的。
 
 
 
 
 那么上面的这张图就是打开chrom浏览器工具的方式，也可以通过快捷键打开
 
 
 
 
 上面这张图就是打开chrom开发者工具之后的样子，现在简单的介绍：
 
 第一个框：是用于屏幕适配的，也就是传说中的chrom能够调试各种移动设备的屏幕分辨率。
 
 
 
 
 上面这张图就是点击之后的效果，用于移动设备屏幕适配的功能
 
 Element标签：该标签使用来查看页面的HTML标签元素的，能够也就是查看源码，我们可以看到布局，可以看到用到的样式，还有用到的链接等等。
 
 console标签：这个就是一个web控制台
 
 sources标签：这个是显示资源文件的
 
 
 
 
 1.该选择框使用来选择资源的，当网页被加载的时候向服务器端请求出来的文件包括.html .ccs .js这样的文件。
 2.这个地方使用来调试js代码的地方，这个非常重要，看到行号上面有蓝色的标签，这个标签就是断电，当我们需要调试程序的时候打一个断电，然后通过3这个工具栏进行调试，那么调试过程就不详细解释，也就是打一个断电然后刷新页面程序会调到你打断点的地方，然后通过4来查看程序中变量的值什么的。
 3.中的标签，第一个是停止状态的按钮就是表示程序是否停止（在debug时），后面的是程序继续跳过方法，跳过下一个语句，调到上一个语句。
 
 Network标签：这个就是抓包常用的工具
 
 
 
 
 那么这个页面就是用于抓包的页面，我们需要分析页面的请求，比如模拟登陆什么的都需要去分析程序是怎么在后台执行的，接下来就，我们可以看到Headers（请求消息头） Preview（预览） Response（响应） Timing（求求时间）Cookie这些东西
 
 最上面还有一个工具栏，有一个红色的圆点和静止符号的按钮，那么这两个按钮，当为红色按钮的时候表示当前的请求不被清空（但是这里的请求是不跳转页面的请求，当跳转到新的页面，那么也会请求也会被清空），后面这个按钮就是清空请求的。
 
 下面还有一行工具栏，这个工具栏主要是用来选择和过滤请求消息的。
 
 再下面可以看到时间线，这个就是记录一个请求开始到结束的时间。
 
 注意：当你需要请求到另一个页面的时候都不清空你的请求的时候需要勾选上Preserve log，同时让红色按钮显示红色
 
 TimeLiness标签：这个就是我们上面讲的请求时间
 
 那么后面的几个标签也不是很常用，我就不做过多的说明，现在简单的了解这些基本的入门使用知识就基本够用，我相信这些功能都用熟之后你也会知道其他的功能的。
 
 二、火狐浏览器FireFox
 
 通过谷歌浏览器的认识那么我们就很简单的使用火狐咯，其实在mac上我是非常喜欢火狐的，因为功能是非常的强大。
 
 现在只讲火狐和谷歌浏览器的区别：
 
 
 
 
 火狐浏览器的打开方式，这里我们选择Web控制台，当然你可以打开没一个试试，试试总是没有错的对吧，我不经意的打开了WebIDE简直就是惊呆我了，这个直接就是一个写前端的神奇没有什么好说的咯。你也可以打开试试，每一个都可以试试，这些功能真的很强大。
 
 当打开之后，我们会发现，火狐真的给人眼前一亮的赶脚
 
 
 
 
 看吧，是不是有一种眼前一亮的赶脚，反正我是有的（当然了你第一次打开的话坑定和我的不一样了，我这个是设置主题之后的效果，你也可以去设置咯）
 
 看看，和chrom没有什么不同吧，都是那几个，而且人家是中文的，对一些看到English就发晕的同学简直是不能太有爱
 
 功能上没什么区别，但是在我抓包的过程中发现，火狐抓包的能力真的强，我自己开始是用谷歌现在我选择使用火狐更多
 
 那么就简单的介绍不同的地方
 
 
 
 
 大家可以看上图，我觉得这个就是我不用深入研究就能知道的最大区别啦：
 
 1、看到没有，这里列出的消息头 Cookie 响应什么的一个都不少，而且人家多了参数 安全性
 参数这个就不用多说了，在我们抓包分析的过程中参数绝对是非常重要的内容，所以能够直接给你展示出来，可以给你减少去分析参数的过程，那么安全性呢，不言而喻了吧。
 
 2、我们再来看，编辑和重发 原始头 能够模拟请求，简直碉堡啦，有没有，喜欢到爆，谷歌当然也可以有，但是好像是要装插件的。
 
 好啦，还有很多不同，但是我说啦，只要你掌握了上面所讲的这些东西，我相信你去研究其他的功能都会是小菜一碟咯。
 
 那么我们来看看设置里面给我们提供了那些自定义功能，这个也是非常强大的功能哦
 
 
 
 
 当点击图中1按钮（设置按钮）后将出现一个神奇的地方，就是这里面，这里面也有很多功能啦，可以一个一个勾选上去体验吧孩子。
 
 注意：看到图中2没有，这个勾选上有什么作用，和Chrom中的Preserve log是一个作用，当你请求道要挑传的页面的时候如不勾选上那么你的请求会被清空，勾选上了那么就不会被清空，这样更加有力你分析问题咯。
 
 三、Safari浏览器
 
 Safari的开发者工具呢也很不错，但是从功能上我觉得是不能够满足我内心强大欲望的，so，我一般上网用Safari，开发调试用上面两种，上网用Safari真的是方便而且简洁。
 
 好了简单的放上几张图让大家感受吧：
 
 
 
 
 这个呢就是打开Safari开发者工具的方式，在顶部菜单栏下面开发者标签中打开显示错误控制台就可以看到下面的场景咯
 
 
 
 
 上面是打开网络这个标签的，我们可以看到该有的功能是一个都没少，而且我觉得非常简洁，说真的我如果不是一个开发者，我会爱死这样的一个浏览器，简洁大方，并且用户体验非常好，没有杂七杂八的功能。
 想起一句话：好的产品不是还能不能扩展，而是做到没有办法再精简。
 
 
 
 
 看吧这就是调试代码的地方，功能上没有什么不同，但是感觉很规范，很简洁，很友好。
 
 如果你是入门，我相信这些已经够啦，当你熟练运用了这些功能之后我相信你自己去研究就非常容易啦
 
 记录学习的每一步，记录每一次的成长！！！！

【第一种】 debugger
 
setInterval(function () {
            check()
        }, 1000);
        var check = function () {
            function doCheck(a) {
                if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
                    (function () { }
                    ["constructor"]("debugger")())
                } else {
                    (function () { }
                    ["constructor"]("debugger")())
                }
                doCheck(++a)
            }
            try {
                doCheck(0)
            } catch (err) { }
        };
        check(); 
 
破解：把Chrome浏览器设定为Deactive breakpoint
 
 

 
 
【第二种】禁用右键 （防止右键查看源代码）
 
window.οncοntextmenu = function () { return false; };
 
 
 
破解：直接按快捷键或菜单开发者工具
 

【第三种】禁用按键
 
 
 
在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）  
 
 
window.onkeydown = window.onkeyup = window.onkeypress = function () {
            window.event.returnValue = false;
            return false;
        };
 
破解：
 
第二种和第三种的方法是：
 
在打开之前调出开发者工具，然后在地址栏输入网址即可
 

【第四种】监视窗口大小
 
 
 
如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面  
 
 
var h = window.innerHeight,
            w = window.innerWidth;
        window.onresize = function () {
            if (h != window.innerHeight || w != window.innerWidth) {
                window.location = "https://www.baidu.com";
            }
        };
 
破解：开发工具设置成独立窗口
 

【第五种】监视DOM修改
 
 
 
好吧，你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度，
 
 
但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素（不支持IE9以下浏览器）
 
 
if (window.addEventListener) {
            window.addEventListener("DOMCharacterDataModified", function () { window.location.reload(); }, true);
            window.addEventListener("DOMAttributeNameChanged", function () { window.location.reload(); }, true);
            window.addEventListener("DOMCharacterDataModified", function () { window.location.reload(); }, true);
            window.addEventListener("DOMElementNameChanged", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeInserted", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeInsertedIntoDocument", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeRemoved", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeRemovedFromDocument", function () { window.location.reload(); }, true);
            window.addEventListener("DOMSubtreeModified", function () { window.location.reload(); }, true);
        }
 
破解：不修改dom页面元素，就不会触发
 

 【第六种】不建议
 
 
 
只要打开控制台，就卡死，
 https://z1.m1907.cn/
 
 
我打开控制台后 他加载了2个JS文件
 
 
https://cntv-201.m1907.cn/z1/js/main.d45e5bd3.chunk.js  
 
https://cntv-203.m1970.cn/z1/js/2.f7be1498.chunk.js
 
重启浏览器后看 历史记录，发现他是疯狂的重载刷新网址，造成的浏览器卡死
 
 
破解：无，大家有什么好的办法可以说说
 
 
 
完整代码
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>F12/检查/开发工具 禁用测试</title>
</head>

<body>

    <h1>F12/检查/开发工具 禁用测试</h1>

    <script> 
        //【第一种】 debugger
        setInterval(function () {
            check()
        }, 1000);
        var check = function () {
            function doCheck(a) {
                if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
                    (function () { }
                    ["constructor"]("debugger")())
                } else {
                    (function () { }
                    ["constructor"]("debugger")())
                }
                doCheck(++a)
            }
            try {
                doCheck(0)
            } catch (err) { }
        };
        check(); 

        // 【第二种】禁用右键 （防止右键查看源代码）  
        window.οncοntextmenu = function () { return false; };

        //【第三种】在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）  
        window.onkeydown = window.onkeyup = window.onkeypress = function () {
            window.event.returnValue = false;
            return false;
        };


        //【第四种】如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面  
        var h = window.innerHeight,
            w = window.innerWidth;
        window.onresize = function () {
            if (h != window.innerHeight || w != window.innerWidth) {
                window.location = "https://www.baidu.com";
            }
        };

        //【第五种】监视DOM修改
        /*好吧，你的开发者工具是单独的窗口显示，不会改变原来网页的高度和宽度，
         但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素（不支持IE9以下浏览器）*/
        if (window.addEventListener) {
            window.addEventListener("DOMCharacterDataModified", function () { window.location.reload(); }, true);
            window.addEventListener("DOMAttributeNameChanged", function () { window.location.reload(); }, true);
            window.addEventListener("DOMCharacterDataModified", function () { window.location.reload(); }, true);
            window.addEventListener("DOMElementNameChanged", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeInserted", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeInsertedIntoDocument", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeRemoved", function () { window.location.reload(); }, true);
            window.addEventListener("DOMNodeRemovedFromDocument", function () { window.location.reload(); }, true);
            window.addEventListener("DOMSubtreeModified", function () { window.location.reload(); }, true);
        }

        

    </script>
</body>

</html>
 
压缩版JS
 
setInterval(function(){check()},1000);var check=function(){function doCheck(a){if((""+a/a)["length"]!==1||a%20===0){(function(){}["constructor"]("debugger")())}else{(function(){}["constructor"]("debugger")())}doCheck(++a)}try{doCheck(0)}catch(err){}};check();window.οncοntextmenu=function(){return false};window.onkeydown=window.onkeyup=window.onkeypress=function(){window.event.returnValue=false;return false};var h=window.innerHeight,w=window.innerWidth;window.onresize=function(){if(h!=window.innerHeight||w!=window.innerWidth){window.location="about:blank"}};if(window.addEventListener){window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},true);window.addEventListener("DOMAttributeNameChanged",function(){window.location.reload()},true);window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},true);window.addEventListener("DOMElementNameChanged",function(){window.location.reload()},true);window.addEventListener("DOMNodeInserted",function(){window.location.reload()},true);window.addEventListener("DOMNodeInsertedIntoDocument",function(){window.location.reload()},true);window.addEventListener("DOMNodeRemoved",function(){window.location.reload()},true);window.addEventListener("DOMNodeRemovedFromDocument",function(){window.location.reload()},true);window.addEventListener("DOMSubtreeModified",function(){window.location.reload()},true)};
 
 
 
参考：
 
 
前端页面通过js禁止打开调试模式的方法
 
 
https://blog.csdn.net/qq_38093702/article/details/82796925
 
 
爬虫笔记之JS检测浏览器开发者工具是否打开  【建议大家可以看看这个，讲的很细】
 
 
https://www.cnblogs.com/cc11001100/p/9265945.html