可以通过以下步骤完成:
// 设置视区的宽度为800像素,高度为600像素 window.innerWidth = 800; window.innerHeight = 600;
以上代码将会将视区的宽度设置为800像素,高度设置为600像素。你也可以根据需要自行调整宽高数值。
使视口可以通过任意一侧的大手柄随意调整大小 特定设备。 将视口锁定为特定设备确切的视口大小,并模拟特定设备特性 媒体查询 媒体查询是自适应网页设计的基本部分。...DOM更改断点 当您想要更改DOM节点或其子节点的代码时,使用DOM更改断点 设置DOM更改断点: 切换到 Elements 面板。 找到您想设置断点的元素并右键单击该元素。...XHR断点 当XHR的请求URL包含指定字符串时,如果要中断,使用XHR断点 设置XHR断点: 点击 Sources 选项卡。 展开 XHR Breakpoints 窗格。 点击添加断点。...事件监听器断点 当想要暂停事件侦听器代码时,使用事件侦听器断点 设置事件监听器断点: 点击 Sources 选项卡。 展开 “Event Listener Breakpoints” 窗格。...选中这些类别中的一个可以暂停该类别的任何事件,或者展开类别并检查特定事件。 ? 异常断点 当您想暂停引发捕获或未捕获异常的代码行时,使用异常断点 设置异常断点: 点击 Sources 选项卡。
使用控制台中操作的最后一个值 使用 $_ 引用在控制台执行的前一操作的返回值 ? 添加 CSS 并编辑元素状态 在“Elements”面板中有2个超级有用的按钮。...第二个 :hov 可以查看所选元素触发的状态,这样就可以看到当它处于活动状态,悬停状态,焦点状态的样式。 ?...按住 Shift 键进入控制台 要编写跨越控制台多行的命令,请按 shift+enter。准备就绪后,在脚本末尾按 Enter 键即可执行该操作: ?...XHR /获取调试 从调试器打开 XHR / Fetch 断点面板。 您可以将其设置为在任何时候发送 XHR / Fetch 请求,或者仅限于特定的呼叫: ?...调试DOM修改 右键单击某个元素并在子树修改上启用 Break:每当脚本遍历该元素的子元素并修改它们时,调试器将自动停止以让您检查发生了什么。 ?
相信只要写过爬虫的,都对F12以及右键-检查不会陌生,没错这都是用于打开Chrome开发者工具的,利用Chrome进行调试以及查看关键信息对于我们进行爬虫是很有必要的。...在源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器。...Sources面板 你可以在这个面板里面调试你的JS代码,也可以在工作区打开你的本地文件 调试JS代码 你可以点击JS代码块前面的数字外来设置断点,如果当前代码是经过压缩的话,可以点击下方的花括号{}来增强可读性...设置断点 断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发 ① DOM元素节点发生改变时 在Elements面板中指定的DOM节点上右击,在弹出的菜单中选择Break...② XHR生命周期状态改变时 当XHR生命周期状态发生改变或者XHR的URL与Sources面板右侧的XHR Breakpoints栏设置的字符串匹配时,则断点就会有触发 ?
一、设置断点 有两种方法可以给代码添加断点 方法1:在 Source 内容区设置 (1)找到要调试的文件,然后在内容源代码左侧的代码标记行处点击,即可打上一个断点。...二、设置断点执行条件 (1)右键点击设置的断点,选择 Edit breakpoint... (2)输入执行断点的条件表达式,当表达式为 true 时断点调试才会生效。...四、DOM 元素设置断点 1,DOM Breakpoints 介绍 除了可以给 js 代码设置断点,我们还可以给 DOM 元素设置断点。...,当 DOM 元素要被修改时,代码就会在自动停留在修改处。...(3)Snippets 的方便之处在于,我们只需要打开 Chrome 就可以编写一份任意页面都可以运行的JS代码 2,使用样例 (1)点击“New Snippet”按钮,创建一个新的片段文件 ?
截图DOM元素 ? 当你只想对一个特别的 DOM 节点进行截图时,你可能需要使用其他工具弄半天,但现在你直接选中那个节点,打开 命令(Command) 菜单并且使用 节点截图 就可以了。 ?...如果您正在控制台调试一些JavaScript代码,并且需要引用先前的返回值,那么这可能非常方便。 重新发起xhr请求 ? 在平时和后端联调时,我们用的最多的可能就是Network面板了。...其实这个还是比较实用的,比如你要测试一个DOM节点文字太长时,样式是否会混乱,或者要去直接修改页面元素去满足一些业务需求时。...控制台中使用快捷键F1打开设置,切换到Experiments 选项 启用Allow custom UI themes ?...其实也很简单: 点击媒体查询条形,调整视口大小和预览适合目标屏幕大小的样式 右键点击某个条形,查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 keys/values ?
因为我们不知道浏览器是否开启了工具条及工具条的宽高,所以我们设置一个阈值如200,如果outer – inner 大于200,我们就认为开启了控制台。...observerConsole(){ //这里使用dom元素,在打开控制台时才会计算id var dom = document.createElement("div") Object.defineProperty...元素,在打开控制台时才会计算id var dom = document.createElement("div"), that = this; Object.defineProperty...代码测试仅测试了firefox、ie、chrome浏览器及部分chrome内核浏览器(如360、qq浏览器、UC浏览器、搜狗浏览器) 5、利用debugger的特性,无限递归 这个方法不能监测控制台被打开...Firefox:页面直接卡死 从上面的测试结果来看,我们可以设置一个间隔2000ms的定时器来不断执行check,这样当控制台开启时,不论是否取消debugger调式,都会使页面卡住。
monitorEvents() - 监控 DOM 对象事件 此函数用于监视 DOM 中的对象是否有特定事件或事件。当在指定对象上触发此事件时,该函数立即将事件和对象输出到控制台。...当指定对象上发生任何指定事件时,Event 对象将被记录到控制台。要监视的事件可以是特定事件、事件数组或映射到预定义集合的通用事件“类型”。...代码片段 在调试时,你可能经常需要一遍又一遍地执行同一行代码,直到你完成故障排除。但是,这会导致你进行大量重复输入或不断地从你最喜欢的代码编辑器复制并粘贴到你的 Chrome 浏览器控制台。...在 Chrome 中创建代码片段: 1.打开 DevTools 窗口并单击选项卡面板中的“Sources”。 2.单击>>符号,选择“snippets”,然后选择 New snippet。...尽管如此,这只是 Google Chrome 的 DevTools 中提供的众多功能的一小部分。你还使用哪些其他工具和技巧?可以在下面的评论区告诉我。
你也可以反过来,在控制台输出的 DOM 元素上右键选择 Reveal in Elements Panel 来直接在 DOM 树中查看。 ? 0 2....函数监听器 monitor(function)/unmonitor(function) monitor(function),当调用指定的函数时,会将一条消息记录到控制台,该消息指示调用时传递给该函数的函数名和参数...清空控制台历史记录 可以通过下面的方式清空控制台历史: 在控制台右键,或者按下 Ctrl 并单击鼠标,选择 Clear Console。 在脚本窗口输入 clear()执行。...工作区编辑文件 Edit Files With Workspaces 工作空间使您能够将在 Chrome Devtools 中进行的更改保存到计算机上相同文件的本地副本。...Cmd + Opt + I 打开/切换检查元素模式和浏览器窗口 Ctrl + Shift + C Cmd + Shift + C 打开 Developer Tools 并聚焦到控制台 Ctrl + Shift
你也可以反过来,在控制台输出的 DOM 元素上右键选择 Reveal in Elements Panel 来直接在 DOM 树种查看。 ? 2....函数监听器 monitor(function)/unmonitor(function) monitor(function),当调用指定的函数时,会将一条消息记录到控制台,该消息指示调用时传递给该函数的函数名和参数...清空控制台历史记录 可以通过下面的方式清空控制台历史: 在控制台右键,或者按下 Ctrl 并单击鼠标,选择 Clear Console。 在脚本窗口输入 clear()执行。...设置一个保存重写属性的目录 ?...工作区编辑文件 Edit Files With Workspaces 工作空间使您能够将在 Chrome Devtools 中进行的更改保存到计算机上相同文件的本地副本。
条件断点: 条件断点是一种高级的调试技巧,它允许我们为某个特定的代码行设置断点,但这个断点只有在满足某个特定条件时才会触发。...的快照 获取当前状态下 DOM 的快照: copy(document.documentElement.outerHTML); 每秒记录一次 DOM 快照,并打印到控制台: doms = []; setInterval...这个技巧在你不想找到函数 fn 的详细定义并手动设置断点,或者当这个 fn 函数是动态绑定到某个函数上,你又不清楚具体源头在哪里时,尤其好用。...在 Chrome 浏览器里,你甚至可以在命令行里直接使用 debug(fn) 命令,这样每次运行 fn 函数时,调试器都会暂停在这个函数的执行过程中,方便你查看和排查问题。...欢迎来评论区留言。 参考:https://alan.norbauer.com/articles/browser-debugging-tricks#record-snapshots-of-the-dom
限制因设备的内存和CPU功率⽽异,但当Chrome达到限制时,它会在⼀个进程中开始从同⼀站点运⾏多个选项卡。 有更高的资源占用。...在浏览器中,你可以打开 Chrome 的"开发者工具",选择"Layers"标签。渲染引擎给页面分了很多图层,这些图层按照一定顺序叠加在一起,就形成了最终的页面。...浏览器中查看调用栈的方法: 当你执行一段复杂的代码时,你可能很难从代码文件中分析其调用关系,这时候你可以在你想要查看的函数中加入断点,然后当执行到该函数时,就可以查看该函数的调用栈了。...新分配的对象会被放入 From 空间中,当 From 空间被占满时,新生代 GC 就会启动了。算法会检查 From 空间中存活的对象并复制到 To 空间中,如果有失活的对象就会销毁。...当复制完成后将 From 空间和 To 空间互换,这样 GC 就结束了。 为了执行效率,一般新生区的空间会被设置得比较小,也正是因为新生区的空间不大,所以很容易被存活的对象装满整个区域。
Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可! 4. 如何快速找到DOM元素 在Elements面板中标记一个DOM元素,并在控制台中使用它。...在调试JavaScript时,可以使用CSS并自定义控制台信息: 输出: 例如: 在中, 可以用设置字符串,设置数字,设置自定义样式等等,还有很多更好的使用方法。...打开控制台并切换到network选项卡。右击所需的请求,然后选择编辑并重新发送。现在可以改变任何想要的改的。更改标题并编辑参数,然后点击重新发送。 下面我用不同的属性发起的两次请求: 14....中断节点更改 DOM是一个有趣的东西。有时候它会改变,你并不知道为什么。 但是,当您调试JavaScript时,Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。...在Chrome控制台中,右击该元素,然后在设置中选择中断:
中,我们可以选中某个请求,右键点击 “编辑并重新发送” 随后会帮我们打开 “网络控制台” 面板,我们可以在其中随便更改 Query、Headers、Body 等内容: 如果我们只需要重新发送服务端请求...当你打开 Devtools 时,可能会进入一个超长的 debugger 循环。这时候你会怎么办?疯狂点击继续来跳过所有短点?那下次刷新网页还会进入这些断点。...DOM 模式可用于查看 DOM 树的深度或查找视口之外的元素。 Composited Layers 可以示浏览器渲染引擎创建的所有不同图层。...点击开始检测后,会重新刷新页面,并展示覆盖率报告,打开文件后它可以告诉我们具体哪些代码部分未使用。 10....欢迎在评论区留言!
this.observe(); } }, }; ConsoleGuard.init(); 代码思想很简单,就是打开控制台时,将页面跳转到空白页,关键在于判断控制台是否被打开。...在Safari中,打印一个DOM节点时,如果控制台被打开,则会读取节点的属性;如果没有,则不会读取。因此,只需要在节点对象属性的取值修饰符中写入跳转空白页的代码即可。...这样,当控制台被打开时,打印DOM节点时将读取节点属性,由于我们在属性的get方法中写入了跳转空白页面的代码,所以在调用属性的取值方法时会进行跳转。...debugger用于在JS代码中设置断点,只有在控制台打开时debugger才会起作用。因此我们可以借助一个定时器来实现功能。...由于debugger只有在控制台打开时才会执行,所以此时可认为打开了控制台。
为避免这种情况并集中精力处理核心代码,在Sources或网络选项卡中打开文件,右键单击并选择Blackbox Script ? 4....类似的,使用DevTools的工作区设置持久化,将本地的文件夹映射到网络,在chrome开发者功能里面对css 样式的修改,都会直接改动本地文件,页面重新加载,使用的资源也是本地资源,达到持久化的效果。...控制台内置指令 可以执行常见任务的功能,例如选择DOM元素,触发事件,监视事件,在DOM中添加和删除元素等。 这像是Chrome自身实现的jquery加强版。 1....布尔断言打印:console.assert() 当你需要在特定条件判断时打印日志,这将非常有用。 如果断言为false,则将一个错误消息写入控制台。 如果断言是true,没有任何反应。...在Chrome地址栏输入:Chrome://inspect ? 正常的话在App中打开WebView时,chrome中会监听到并显示你的页面。
Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可! ? 4. 如何快速找到DOM元素 在Elements面板中标记一个DOM元素,并在控制台中使用它。...debug(car.funcY),当调用 car.funcY时,将以调试模式停止: ?...打开控制台并切换到network选项卡。右击所需的请求,然后选择编辑并重新发送。现在可以改变任何想要的改的。更改标题并编辑参数,然后点击重新发送。 下面我用不同的属性发起的两次请求: ? 14....中断节点更改 DOM是一个有趣的东西。有时候它会改变,你并不知道为什么。 但是,当您调试JavaScript时,Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。...在Chrome控制台中,右击该元素,然后在设置中选择中断: ?
笔者在前段时间的开发时,需要通过 Chrome DevTools来分析一个接口,调试中发现了控制台中的 copy 函数,非常的好用,进而发现了新世界,学习到了 Chrome 一些奇怪的调试技巧,这里总结分享给大家...copy 接受一个变量作为参数,如果有多个参数,则忽略第一个后面的所有参数,当需要复制不存在变量名的数据时,可以配合 Store As Global 来使用。...Store As Global 当我们从控制台获取一些数据却没有变量名时(在开发时特别常见),可以通过右键点击数据旁的小三角形,通过其来储存为全局变量,变量名为 temp1 一直延续下去,就可以配合 copy...根据这个操作可以很轻易的复制一个元素,并对其执行一些 DOM 操作。...扩展网格线:默认情况下,网格线仅显示在带有display: grid或display: inline-grid设置在其上的元素内部;当打开此选项时,网格线沿每个轴延伸到视口的边缘。
Chrome提供了所需的一切。跳到控制台并点击‘切换设备模式’按钮。观察窗口变化即可! ? 4. 如何快速找到DOM元素 在Elements面板中标记一个DOM元素,并在控制台中使用它。...debug(car.funcY),当调用car.funcY时,将以调试模式停止: ?...打开控制台并切换到network选项卡。右击所需的请求,然后选择编辑并重新发送。现在可以改变任何想要的改的。更改标题并编辑参数,然后点击重新发送。 下面我用不同的属性发起的两次请求: ? 14....中断节点更改 DOM是一个有趣的东西。有时候它会改变,你并不知道为什么。 但是,当您调试JavaScript时,Chrome可以在DOM元素发生更改时暂停。你甚至可以监视它的属性。...在Chrome控制台中,右击该元素,然后在设置中选择中断: ? 出处:程序人生 版权申明:内容来源网络,版权归原创者所有。
Chrome Devtools是Web测试时每天都要用的工具,它提供了很多调试功能,可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集,很多功能并没用到过。...测试时在日常工作中提BUG时,如果能提供有用的信息给到开发工程师,可以降低和开发工程师之间的沟通成本,巧用开发者工具也能间接体现自身具备一定的技术专业性,所以今天就分享Chrome Devtools 的常用功能...通常控制台有JS报错,直接找到前端开发,再由前端开发根据具体问题进行调试,并解决问题。...在源代码面板中设置断点来试 JavaScript ,或者通过 Workspaces (工作区)连接本地文件来使用开发者工具的实时编辑器 断点调试; 调试混淆的代码; 使用开发者工具的 Workspaces...(工作区)进行持久化保存; 4 Network 使用Network网络面板了解请求和下载的资源文件并优化网页加载性能。
都有它相关的左右,先来看一张图,它都有哪些功能 image Call Stack调用栈:当断点执行到某一程序块处停下来后,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列...request.send() 的地方中断 image DOM Breakpoints: 可以给你的DOM元素设置断点,有时候真的需要监听和查看某个元素的变化情况,赋值情况,但是我们并是不太关心哪一段代码对它做的修改...,只想看看它的变化情况,那么可以给它来个监听事件,这个时候DOM Breakpoints中会如图 image 当要给DOM添加断点的时候,会出现选择项分别是如下三种修改1.子节点修改2.自身属性修改3....勾选对应的事件类型,当触发了该类型的事件的 JavaScript 代码时就会自动中断。 4....DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。
领取专属 10元无门槛券
手把手带您无忧上云