精华内容
下载资源
问答
  • 开发时建议关闭chrome的缓存[Disable cache(while DevTools open)] 问题:修改了css,JS后,chrome看不到效果 具体情景:最近在写一个PHPbbs,在写CSS时,习惯性的按F5刷新,firefox ie等,都能即时见到效果,唯独...

    开发时建议关闭chrome的缓存[Disable cache(while DevTools open)] 问题:修改了css,JS后,chrome看不到效果

    具体情景:最近在写一个PHPbbs,在写CSS时,习惯性的按F5刷新,firefox ie等,都能即时见到效果,唯独chrome 怎么都不行,想了想应该是它的缓存机制跟别的不一样

    网上一阵搜索果然如此,原来 chrome要想即时看到效果 是用 ctrl+F5全部强制刷新,顿时恍然大悟!这是一种方便的方法

    另外一种一劳永逸的方法,就是打开开发者工具进行神设置,专门为开发者考虑的见下图
    在这里插入图片描述

    展开全文
  • 用于解决Chrome浏览器弹出”停用开发者模式“警告的bat,关闭Chrmoe浏览器后右键点击该文件,选择“以管理员身份运行”即可。
  • 没接触后台开发前,一直觉得浏览器开发者模式就多就是看看网页的源代码。后来在实践中发现,它还有很多好用的地方。好笔记不如烂笔头,还是老老实实记录一波。鉴于目前接触得还比较少,本文将会持续更新。

    前言

    没接触后台开发前,一直觉得浏览器的开发者模式就多就是看看网页的源代码。后来在实践中发现,它还有很多好用的地方。好笔记不如烂笔头,还是老老实实记录一波。鉴于目前接触得还比较少,本文将会持续更新。

    下面这个是找资料的时候发现的,详细地介绍了开发者模式的Element,Console,Sources,Network四个模块,推荐去看看。
    Chrome浏览器F12开发者工具简单使用

    笔记正文

    1. 开发者模式的打开

    开发者模式可以通过以下方式打开:

    • 按F12键
    • 快捷键Ctrl+Shift+I
    • 点鼠标右键,选择”检查“

    操作完成后,我们就可以的到以下的界面:
    在这里插入图片描述

    2.开发者工具简介

    • Elements:用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改,即时显示。大大方便了开发者调试页面

    • Console:控制台一般用于执行一次性代码,查看JavaScript对象,查看调试日志信息或异常信息。还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行~

    • Sources:该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码,此外最重要的是可以调试JavaScript源代码,可以给JS代码添加断点等。

    • Network:网络页面主要用于查看header等与网络连接相关的信息,可以看到前后端交互的一些信息。

    2.4 Network

    Network这个模块的主要功能如下所示:
    在这里插入图片描述
    个人使用记录:

    • 观察前后端信息的信息交互,比如想模仿实现某个功能的时候,可以触发监听事件(鼠标点击、鼠标移动等),然后查看前端给后端发送的请求报文和服务器返回的信息,然后参照这些信息去仿写。




    待续……
    展开全文
  • 浏览网页时,有时候那文字实在是太小了,尤其是英文页面,...以下教程仅适用 Chrome 系浏览器(包括原版的Chrome和国内各种浏览器的极速模式),Firefox 和 IE 大同小异,这里不展开。步骤解析遇到字儿小的页面时,按...

    浏览网页时,有时候那文字实在是太小了,尤其是英文页面,看着真心费眼。有啥办法能把字儿变大点吗?

    一般浏览器都有设置最小字号的地方,但这招杀伤力比较大,有时候会误伤,搞得页面很难看。这里倒是有个临时的办法,临时解决一下问题,挺方便的。以下教程仅适用 Chrome 系浏览器(包括原版的Chrome和国内各种浏览器的极速模式),Firefox 和 IE 大同小异,这里不展开。

    步骤解析

    遇到字儿小的页面时,按下列步骤食用即可(看不懂的话直接看下面的图片):

    1. 在Chrome或360浏览器中,按【F12】调出【开发者工具】面板。面板左上角有个箭头的图标,点击,图片变蓝色。
    2. 把鼠标挪到那些小字儿上面,点一下。
    3. 此时面板分为上下两部分,上面是【Elements】,不用管。下面是【Styles】,表示刚才鼠标点选文本的样式,下方有个搜索框,输入【font-size】,即可找到定义这些文字的字号大小。
    4. 如图所示,双击【font-size】的值(如 12px),改成【16px】或【20px】都行,取决于你的近视程度。
    5. 再按一下【F12】关闭【开发者工具】面板。搞定。
    134024388790b3caaa7aa3703e1191d9.png

    巧用 F12 临时解决网页字儿小的问题

    注意事项

    需要注意一点的是,本次改动是临时性的,仅针对当前页面有效。刷新页面或关掉重新打开,字号都会变回原样。

    如果你熟悉 CSS 的话,还可以进一步临时修改网页的各种样式(如换个字体、改变颜色等等),直到你满意为止。

    当然,F12 调出的【开发者工具】还有很多非常实用的功能,以后慢慢介绍吧。

    展开全文
  • 造成的浏览器卡死 破解:无,大家有什么好的办法可以说说 参考: 前端页面通过js禁止打开调试模式的方法 https://blog.csdn.net/qq_38093702/article/details/82796925 爬虫笔记之JS检测浏览器开发者工具是否打开 ...

    【第一种】 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

    展开全文
  • 谷歌浏览器开发者模式

    万次阅读 多人点赞 2018-11-23 11:55:10
    一般在windows系统上浏览器开发者工具打开都是按F12快捷键,按F12快捷键打开谷歌浏览器如下图所示,下面来分别解释一下各个功能 一、第一个功能:定位的作用,点击一下这个图标,将鼠标放在任意页面上的位置,就...
  • 一、Chrome 浏览器开发者工具简述 1.1 什么是浏览器开发者工具 其实简单的说,浏览器开发者工具就是给专业的web 应用和网站开发人员使用的工具,它的 作用在于,帮助开发人员对网页进行布局,比如HTML+CSS,帮助...
  • 大家好,我是jerry帝,迷你世界是一款有趣好玩的...迷你世界推出了开发者游戏工具,这一玩法很大程度上丰富了游戏的可玩性,让每一位玩家都可以亲身体验到自己动手“开发”游戏的乐趣。那么,这一模式具体应该如何上...
  • 浏览器开发者工具在爬虫中常用来进行简单的抓包分析、JS逆向调试,打开方式: F12; 快捷键 Ctrl+Shift+I; 鼠标右键检查或者审查元素; 浏览器右上角 —> 更多工具 —> 开发者工具 常见禁用开发者工具手段...
  • Other——其他 (6)Has blocked cookies(不要勾选) 如果勾选,服务器修改cookie(用户身份字段信息)请求会被隐藏 (7)Blocked requests(不要勾选) 如果勾选,所有请求会被隐藏 5.放大镜(全局搜索引擎) 点击...
  • 为什么要使用Performance GC的目的是为了实现内存空间的良性循环 良性循环的基石是合理使用 即刻关注才能确定是否合理 Performance提供多种监控方式 内存问题的表现 ...1. 浏览器任务管理器 快捷键shift+ESC
  • 浏览器开发者工具network详解

    千次阅读 2018-05-30 18:30:00
    General概诉 请求链接 Request URL: 请求方式 ...用于过滤 Referrer 报头内容,目前是一个候选标准,不过已经有部分浏览器支持该标准。 Referrer Policy: Response Headers响应包头 接受范围 A...
  • Chrome(F12开发者工具)是非常实用的开发辅助工具,对于前端开发者简直就是神器,但苦于开发者工具是英文界面,且没有中文,这让很多朋友都不知道怎么用。下载吧小编为大家带来Chrome开发者工具基础功能和高级性能...
  • 浏览器F12开发者工具的妙用》

    千次阅读 2020-03-05 15:19:15
    浏览器的有趣玩法 前端相关小技巧 ^-^ 下面的几种用法本人都——试过,还是挺有意思的,安利一下。 一:复制不可复制的文字 例子(比如我在某乎分享过一篇文章,我设置了不可转载,那么如果别人想复制我的文字时...
  • 浏览器是对服务器返回的数据进行解析与渲染,通过浏览器开发者工具可以对源码进行分析,有一句老话叫可见即可爬,博主以Chrome为列,把学习的过程记录下来,如果有问题,欢迎留言纠正 开发者工具栏简介 浏览器...
  • 浏览器开发者工具,自己设置屏幕分辨率调试(chrome) 进入浏览器后点击F12进入开发者工具后,点击左上角手机状按钮,如图: 进入视图后,点击上方居中的下拉箭头,如图: 选择最后选项Edit,进入编辑框,如图: ...
  • 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。通常只要是开发遇到了...
  • 检测浏览器开发者工具是否打开了

    千次阅读 2019-04-17 09:28:00
    在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理。本篇文章主要讲述几种前端JS检测开发者工具是否...
  • 1、右键Chrome浏览器图标 属性——>打开文件位置 2、将下载好的补丁(见文章末尾)放入如图所示文件夹中 附件:补丁链接:https://pan.baidu.com/s/1epBHAT_239iwxyYihmImiA 提取码:x4du ...
  • UC浏览器开发者

    千次阅读 2015-03-26 15:32:45
    UC浏览器开发者版 目录[隐藏] 1 关于RI2 准备工作3 调试方式相关下载 1 关于RI 目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便,直接在手机上进行...
  • 在学习python来调用浏览器,google浏览器一直弹窗显示请停用开发者模式的对话框,脚本中的url也不能够正常的跳转,后面百度了一下,google浏览器的版本较多,故也需要对应的驱动才能够正常的运行代码,下面把下载...
  • 嘿嘿,现在介绍大家一个在浏览器修改直接同步到本地代码修改的方法--- (程序员都是从0开始数数的!) 第0步:在你要更改的文件里打开本地修改; 第一步:添加文件到工作区; 第二步:允许请求; 第三步:在...
  • 设置为手机模式 from selenium import webdriver # 手机模式 option = webdriver.ChromeOptions() mobile_emulation = {"deviceName": "iPhone 6"} option.add_experimental_option("mobileEmulation", mobile_...
  • 此时可以使用Chrome提供的开发者工具在前端页面上具体看到具体那里花费时间,方便定位问题。 二、F12中的Watefall是什么? 1、Watefall Watefall是Chrome的瀑布流,可以看到请求花费时间具体到了那些部分,就是...
  • WEB浏览器开发者工具的几个技巧

    千次阅读 2018-12-25 18:11:15
    浏览器开发者工具 在浏览器的正文中点右键,或者在浏览器的菜单里面,更多工具,可以很容易的找到开发者工具,当然,你也可以使用F12直接调出这个工具组。 什么是开发者工具 用来调试HTML,js等web内容的工具,...
  • 谷歌浏览器安装开发者模式的扩展程序方法 扩展名为.crx的文件是谷歌浏览器Chrome的插件文件,也就是Chrome的“扩展程序”,可广泛用于Mac、Linux、Windows系统。这类文件增加了额外的功能或主题,以压缩格式保存,...
  • 上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources。 Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。通常只要是开发遇到了js...
  • 按住Ctrl键,然后滚动鼠标滚轮(即鼠标中键)。
  • 如何调出开发者工具2.开发者工具初步介绍2.1元素(Elements)2.2控制台(Console)2.3源代码(Source)2.4Network详细介绍3.Network主题内容介绍4.请求文件具体说明5.细节补充 1.如何调出开发者工具 按F12调出 右键...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,676
精华内容 33,470
关键字:

更改浏览器开发者模式