網頁控制台 - daniel-qa/Vue GitHub Wiki
- querySelector
返回的元素是否存在。
document.querySelector('#app')
- 在 console 中使用 id 来操作或获取脚本信息
HTML
<script>
document.write('<script id="vue" src="' + blobHost + '/0-public/js/vue.js"><\/script>');
</script>
以下是如何在 console 中使用 id 来操作或获取脚本信息的示例:
// 获取 id 为 'vue' 的 script 标签
const vueScript = document.getElementById('vue');
// 输出脚本的 src 属性
console.log(vueScript.src);
// 更改脚本的 src 属性(例如,如果你需要更新脚本)
vueScript.src = 'https://new.url/to/vue.js';
id="vue" 为该 <script> 标签指定了一个唯一的 ID。在整个文档中,id 必须是唯一的,因此可以通过这个 ID 唯一地识别这个 <script> 标签。
在 JavaScript 中,你可以通过 document.getElementById('vue') 来选择这个 <script> 标签。这对于动态操作或调试特定的 <script> 标签可能很有用。
- console
- console.log
console.log('This is a log message.');
- console.dir()
使用 console.dir() 查看对象属性: console.dir() 显示对象的属性和方法,通常以树状结构展示。
console.dir(document.body);
- debugger
使用 debugger 语句: 在代码中插入 debugger; 语句可以使浏览器在执行到该行时暂停,并允许你检查变量和调用堆栈。
function test() {
let a = 5;
debugger; // 执行到这里时会暂停
console.log(a);
}
test();
- watch
假设你有一个 Vue 组件如下:
javascript
export default {
data() {
return {
count: 0
};
},
watch: {
count(newVal, oldVal) {
console.log('Count changed from', oldVal, 'to', newVal);
}
}
}
在 Vue Devtools 中,当 count 的值发生变化时,watch 监听器的调用会被记录,并且你可以在 “Watchers” 选项卡中看到相关信息。