断点参数 断点并不是孤立存在的,它也可以有参数,从而定制出不同的断点行为,让其能在不同条件下生效,这个参数就叫断点参数。 我们平时用得比较多的条件断点,它就是断点参数的最典型应用。...值得一提的是:debug模式运行,若没有任何断点被激活(比如你压根就没打断点),效果和run模式启动是一样(但控制台窗口不一样,因此日志输出的位置也就不一样)。...一共9个按钮,从左往右依次解释下: Show Execution Point:回到当前激活的断点处。...但需注意:若此项不勾选上,小红点并不会消失,而是由实心的变为空心的,当然喽,一般情况下并不会动此项 Suspend:众所周知,断点激活时会阻塞程序的继续运行,从而阻塞当前线程。...上面介绍了异常断点它是一种全局断点类型,因此并不能在代码处直接单击,而是只能在管理窗口里统一添加: 和其它断点类型相比,至少有如下不一样: 创建断点只能通过断点管理窗口创建,而不能通过鼠标点击方式
断点参数 断点并不是孤立存在的,它也可以有参数,从而定制出不同的断点行为,让其能在不同条件下生效,这个参数就叫断点参数。 我们平时用得比较多的条件断点,它就是断点参数的最典型应用。...[Run模式运行] [Debug模式运行] 值得一提的是:debug模式运行,若没有任何断点被激活(比如你压根就没打断点),效果和run模式启动是一样(但控制台窗口不一样,因此日志输出的位置也就不一样)...标记在方法签名的那一行,在该方法执行的入口/出口处被激活 Exception breakpoint(异常断点):红色小闪电。这是一个特殊但很好用的断点,当程序抛出指定异常时会激活异常断点。...但需注意:若此项不勾选上,小红点并不会消失,而是由实心的变为空心的,当然喽,一般情况下并不会动此项 Suspend:众所周知,断点激活时会阻塞程序的继续运行,从而阻塞当前线程。...上面介绍了异常断点它是一种全局断点类型,因此并不能在代码处直接单击,而是只能在管理窗口里统一添加: [20210129073647193.gif#pic_center] 和其它断点类型相比,至少有如下不一样
使用惯用且可识别的icon,并且不要用相同的icon代表不同一级目的地 ?...备选方案 Modal drawer:在响应式布局网格中,600dp宽的地方为最小断点处,standard drawer 应该用 modal drawer 替换。...可见性 Standard navigation drawer 的可见性取决于屏幕大小,app 布局和使用频率。...---- 行为 打开与关闭 Modal navigation drawers 总是由 drawer 外的可见处打开,例如 top app bar 中的 navigation menu icon 。...每个项目可以被激活,不激活,盘旋,聚焦和按下。 ? ? 不能同时激活两个项目
类似 JQuery 的选择器可实现更快的 DOM 节点选择 在Web开发中,快速有效地选择DOM元素是一项常见且重要的任务。...JQuery库以其简洁的语法和强大的功能而广受欢迎,它使用CSS选择器来选择DOM元素,相较于传统的Web API,JQuery提供了更加高效的方式。...例如: $x('/html/body/div') 这行代码会根据提供的XPath表达式选择对应的DOM元素。...= [...new Array(sq).keys()]; return arr; } 如果你需要在 genArr 函数内设置一个断点,可以通过在控制台上调用 debug 函数来激活自动断点: debug...但如果你需要检查函数的源代码而不激活自动断点呢?
这种方式不说他绝对的不好,只是相比之下断点有以下两个优势: 使用 console.log(),您需要手动打开源代码,查找相关代码,插入 console.log()语句,然后重新加载此页面,才能在控制台中看到这些消息...点击 Deactivate breakpoints 取消激活断点。 其将变为蓝色,表示处于活动状态。 在完成此设置后,DevTools 会忽略您已设置的任何断点。 尝试使用不同的值运行演示。...取消激活所有断点可让 DevTools 忽略所有代码行断点,但同时会继续保持其启用状态,以使这些断点的状态与取消激活之前相同。...若要设置 DOM 更改断点: 点击 Elements 标签。 转至要设置断点的元素。 右键点击此元素。...然后再次触发,选择跳过断点。就可以使得元素出现。 ? Mouse outer 如果是通过 mouse (鼠标事件来触发的)并且触发元素是写在触发元素外的情况。可以通过断点触发来阻断。
Chrome调试工具常用功能整理 windows: ctrl + shift + i mac: cmd + opt + i Elements Dom 选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件...在 Element 选项卡中可以修改html 断点 在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为..., 比如 click 发生时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval...断点. xhr 断点 打开 chrome 浏览器控制台 选择 source 面板 点击 XHR Breakpoints 右侧的“+”,添加断点规则 xhr:XMLHttpRequest 使用步骤 实例文章...$(selector) 即使当前页面没有加载jQuery,你也依然可以使用$和$$函数来选取元素,实际上,这两个函数只是对document.querySelector()和document.querySelectorAll
② 断点:在左边行号栏单击左键,或者快捷键Ctrl+F8 打上/取消断点,断点行的颜色可自己去设置。③ Debug窗口:访问请求到达第一个断点后,会自动激活Debug窗口。...可以自己去尝试下这四个选项。 在菜单栏Run里有调试对应的功能,同时可以查看对应的快捷键。...,点击这个按钮可跳转到当前代码执行的行。...勾选Log message to console,则会将当前断点行输出到控制台,如图勾选Evaluate and log,可以在执行这行代码是计算表达式的值,并将结果输出到控制台。...Class filters:类过滤,根据类名过滤Pass count:用于循环中,如果断点在循环中,可以设置该值,循环多少次后停在断点处,之后的循环都会停在断点处。
2.断点: 在左边行号栏单击左键,或者快捷键Ctrl+F8 打上/取消断点,断点行的颜色可自己去设置。3.Debug窗口: 访问请求到达第一个断点后,会自动激活Debug窗口。...可以自己去尝试下这四个选项。 在菜单栏Run里有调试对应的功能,同时可以查看对应的快捷键。 二....,点击这个按钮可跳转到当前代码执行的行。...•勾选Log message to console,则会将当前断点行输出到控制台,如图6.3•勾选Evaluate and log,可以在执行这行代码是计算表达式的值,并将结果输出到控制台。...•Pass count: 用于循环中,如果断点在循环中,可以设置该值,循环多少次后停在断点处,之后的循环都会停在断点处。
使用Next Action特性将确保您的业务逻辑中使用的标准操作具有更好的可重用性。...,若该对象为HTML元素,则该元素的DOM的表达式会按DOM树输出。...在使用的时候这两个方法需要传递同一个参数,若不传,则为“default” ,Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用加上熟悉的css选择器来选择DOM节点。..., (selector)是对ocument.querySelectorAll() 的封装。返回的是所有满足选择条件的元素的一个集合。 Copy,可以将在控制台获取到的内容复制到剪贴板。...当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,可以通过debugger来做到,同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。
继上次登陆框引起的血案这个文章之后,时隔一个月笔者又写了续集,呃……升华版。 0x00 文章内容结构图 ? 0x01 信息泄露 利用泄露的信息可以大大增加我们的可测试点,从而增加我们的成功率。 1....HTML源代码 必看的肯定要属HTML源代码了,源代码里包含了下面所说的JS文件。...HTML源代码会泄露很多信息,像程序员未删除的注释、敏感路径等都可能在HTML源代码中找的到,从来增加发现漏洞的成功率。 2. JS文件 很多JS文件中会泄露其他路径,或者敏感函数等。...POST类型,尝试修改改为GET类型: ? 发现成功弹窗,呃,即使不能修改成功,那么还可以组合CSRF一起使用。 2. 登陆成功时XSS ?...0x05 URL跳转 用户登陆这个功能这里,可以测试的点可以但不仅仅并且不一定是如下几个: 1.登陆成功后跳转到的页面 此处link1参数可以控制跳转到的页面: ? ?
添加属性(enter) 修改 html(F2) 删除元素(delete) 除了右键, 还可以: h toggle 元素的 visibility 属性 拖拽节点, 调整顺序 拖拽节点到编辑器 ?...全局事件断点 devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点;还可以对...下面这个图是 resize 时中断, 因为库都代理了, 还需要在断点处一步一步跟下去才能走到业务代码中. ?...jQuery,你也依然可以使用$和$$函数来选取元素,实际上,这两个函数只是对document.querySelector()和document.querySelectorAll()的简单封装,$用于选取单个元素...$0 为Elements HTML 面板中选中的元素。$1 为上一次在 HTML 面板中选中的元素。$2、$3、$4 同样的。
② 断点:在左边行号栏单击左键,或者快捷键Ctrl F8 打上/取消断点,断点行的颜色可自己去设置。 ③ Debug窗口:访问请求到达第一个断点后,会自动激活Debug窗口。...[图1.3]:如果你的IDEA底部没有显示工具栏或状态栏,可以在View里打开,显示出工具栏会方便我们使用。可以自己去尝试下这四个选项。 ? ...勾选Log message to console,则会将当前断点行输出到控制台,如图6.3 勾选Evaluate and log,可以在执行这行代码是计算表达式的值,并将结果输出到控制台。...Pass count:用于循环中,如果断点在循环中,可以设置该值,循环多少次后停在断点处,之后的循环都会停在断点处。 ? ? ...2、断点回退 所谓的断点回退,其实就是回退到上一个方法调用的开始处,在IDEA里测试无法一行一行地回退或回到到上一个断点处,而是回到上一个方法。
② 断点:在左边行号栏单击左键,或者快捷键Ctrl+F8 打上/取消断点,断点行的颜色可自己去设置。 ③ Debug窗口:访问请求到达第一个断点后,会自动激活Debug窗口。...可以自己去尝试下这四个选项。 [图1.4]:在菜单栏Run里有调试对应的功能,同时可以查看对应的快捷键。...勾选Log message to console,则会将当前断点行输出到控制台,如图6.3 勾选Evaluate and log,可以在执行这行代码是计算表达式的值,并将结果输出到控制台。 ...Pass count:用于循环中,如果断点在循环中,可以设置该值,循环多少次后停在断点处,之后的循环都会停在断点处。 ...[图8.1] 2、断点回退 所谓的断点回退,其实就是回退到上一个方法调用的开始处,在IDEA里测试无法一行一行地回退或回到到上一个断点处,而是回到上一个方法。
2、断点:在左边行号栏单击左键,或者快捷键Ctrl+F8 打上/取消断点,断点行的颜色可自己去设置。 3、Debug窗口:访问请求到达第一个断点后,会自动激活Debug窗口。...可以自己去尝试下这四个选项。 [图1.3] 在菜单栏Run里有调试对应的功能,同时可以查看对应的快捷键。...勾选Log message to console,则会将当前断点行输出到控制台,如图6.3 勾选Evaluate and log,可以在执行这行代码是计算表达式的值,并将结果输出到控制台。...Pass count:用于循环中,如果断点在循环中,可以设置该值,循环多少次后停在断点处,之后的循环都会停在断点处。...[图8.1] 2、断点回退 所谓的断点回退,其实就是回退到上一个方法调用的开始处,在IDEA里测试无法一行一行地回退或回到到上一个断点处,而是回到上一个方法。
这种方式最大的缺点是: HTML 代码和 JS 代码混合; 可扩展性差; 尽管可以通过 window.onload 绑定事件等方式来是实现 JS 代码从 HTML 中分离,也可以把函数改得更复杂以实现通用性...但是总的来说,还是很难做到一处定义到处引用。 后来随着各种 JS 类库的出现,更强大的 Tabs 出现了,最出名的就是 jQuery UI 中的 tabs 插件。...而且,jQuery UI Tabs 还提供了非常强大的控制功能,你可以动态地添加 tab,可以随意更改激活事件,可以定义切换效果,还可以设置默认激活状态和禁用等。....find("li") 来找到要添加事件的元素,绑定事件的时候,我们可以通过该元素在 $(".tabs li") 集合中的索引值来明确是哪一个标签被激活,然后对应索引值的 panel 显示。...*/ } .ui-tabs-hide { display: none; } 这样,就可以根据你的需要,结合自己的 CSS, 定制不同样式的滑动门了。
Chrome 开发工具一共提供了8大组工具: Element 面板: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。...断点切换(Toggle breakpoints): 控制断点的开启和关闭,同时保持断点完好。...添加和移除断点 在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置的断点处会有一个蓝色的标签,单击蓝色标签...如果在该行之前还有别的断点,程序会依次经过前面的断点。另外需要提出的是这个功能在任意一行代码的边栏(gutter line)前单击右键都会看到。...在输入框中,输入一个可解析为真或假的表达式。仅当条件为真时,执行会在此暂停。 ? 心得:如果你想让程序在某处从来都不要暂停,可以编辑一个条件永远为false的条件断点。
有了条件断点,我们在调试代码的时候能够更加精确地控制代码断点的时机 ?...三、Call Stack 调用栈 1,界面介绍 (1)当断点执行到某一程序块处停下来后,右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈,从上到下由最新调用处依次往下排列。...,当 DOM 元素要被修改时,代码就会在自动停留在修改处。...五、统一管理所有断点 我们可能会在不同的文件、不同的位置添加许多断点。...“去掉/加上”该断点,点击断点可跳转到相应的程序代码处 ?
Tips:断点一但设置就会一直保存在工程中直到手动删除 通过配置allow parallel run让一个服务开多个端口运行? 断点时动态改变参数里面的值? 控制线程的执行顺序? 比如: 1....Temporary line breakpoint(临时行断点):与行断点类似,不同之处在于该类型的断点在被激活之后会被立即删除 3....与行断点不同,异常断点不需要与源代码映射(不需要打在具体某一行代码上),因为异常断点应用程序级别的 断点参数: Suspend 若它不被选中的话断点的相关动作 依然激活执行 ,只是线程不会被组塞了而已。....png image-20201215095800359.png 高级调试技巧: 回退断点:调试的时候,想要重新走一下流程而不用再次发起一个请求,其实就是回退到上一个方法调用的开始处,在IDEA里测试无法一行一行地回退或回到到上一个断点处...在idea的右下窗口打开memory view 远程调试(远程Debug): 远程调试是调试分布式系统的一个利器。因为现在都以微服务部署,你不可能在本地同时启动N个服务来做本地调试。
断点:在左边行号栏单击左键,或者快捷键Ctrl+F8 打上/取消断点,断点行的颜色可自己去设置。 Debug窗口:访问请求到达第一个断点后,会自动激活Debug窗口。...[图1.2] 如果你的IDEA底部没有显示工具栏或状态栏,可以在View里打开,显示出工具栏会方便我们使用。可以自己去尝试下这四个选项。 ?...勾选Log message to console,则会将当前断点行输出到控制台,如图6.3 勾选Evaluate and log,可以在执行这行代码是计算表达式的值,并将结果输出到控制台。 ?...Pass count:用于循环中,如果断点在循环中,可以设置该值,循环多少次后停在断点处,之后的循环都会停在断点处。 ? [图6.4] ?...[图8.1] 2、断点回退 所谓的断点回退,其实就是回退到上一个方法调用的开始处,在IDEA里测试无法一行一行地回退或回到到上一个断点处,而是回到上一个方法。