使用控制台获取元素和控制校验

获取元素

$0：控制台Elements面板里最近选中的元素。

当你在 Elements 面板中点击选择了一个元素后，可以在控制台中使用 $0 来引用这个元素，这个特性适用于大多数现代浏览器的开发者工具，包括 Chrome、Edge 和 Firefox。这对于快速测试和调试非常有帮助。例如，你可以使用 JavaScript 代码直接操作这个元素，或者查询其属性等。

$0：最近选中的元素。
$1：上上次选中的元素。
$2：以此类推，最多可以回溯到最近的 5 个选中的元素（即 $0 到 $4）

例如使用$0控制元素内容

此外，还有几个类似的快捷方式：

$_：引用控制台中最后一次执行的结果。

$_ 存储了你在控制台最后一次执行的结果。这对于快速引用上次的操作结果非常有用，尤其是当你忘记将某个重要结果存储到一个变量时

2 + 2
// 输出: 4
$_
// 输出: 4 (即上一次执行的结果)

$$：等同于 document.querySelectorAll()，用于通过 CSS 选择器查找多个元素。

$$ 是 document.querySelectorAll 的缩写。它允许你使用 CSS 选择器语法来查找页面上的所有匹配元素，并返回一个数组（实际上是一个 NodeList 对象）。

$$('a')
// 返回页面上所有的 <a> 标签

$x：允许使用 XPath 表达式来查询 DOM 中的节点。

$x 可以让你使用 XPath 表达式来查询 DOM。XPath 是一种在 XML 文档中查找信息的语言，也可以应用于 HTML 文档。这在需要根据更复杂的条件选择元素时特别有用。

$x('//a[contains(@href, "example")]') 
// 返回所有 href 属性包含 "example" 的 <a> 标签

控制校验

解除禁用按钮

以上选中的元素中，【报废】按钮是禁用的，可以看出是使用了elementUI库的el-button组件，通过控制台如果解除禁用呢？
解决：只需要删除属性disabled，删除类名is-disabled即可解除禁用

// 删除 disabled 属性
$0.removeAttribute('disabled');// 移除类名is-disabled
$0.classList.remove('is-disabled');// 设置文字颜色为红色(可选)
$0.style.color = '#ff0000'

这样按钮就可以正常点击了！

解除表单校验

如果是表单，如何去掉必填校验呢？
解决：选中整个表单后使用$0获取元素，在使用__vue__获取实例，既然能获取实例了，那么想怎么操作就怎么操作，这里解决必填校验只需清空属性rules 即可。

注意: vue2可以用一个特殊的属性__vue__获取实例，vue3是__vue_app__

// 清空必填校验
$0.__vue__.rules = null;

可以看到必填校验已经被去除了，确认按钮能正常点击了，但是发现控制台有个报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "rules"

意思是：
[Vue 警告]: 避免直接修改一个 prop，因为当父组件重新渲染时，prop 的值会被覆盖。相反，应该基于 prop 的值使用 data 或 computed 属性。被修改的 prop 是： “rules”

从这个报错信息可以知道，如果先执行了$0.__vue__.rules = null;去清空校验，那么之后去修改表单，校验还是会被重置(即源代码设置的校验)，所以，我们只需要在最后要提交时再去控制台清空校验即可。

注意：以上这些功能主要是为了开发和调试过程中的便利性而设计，并不适合直接用于生产代码中。