網頁控制台 - 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” 选项卡中看到相关信息。

⚠️ **GitHub.com Fallback** ⚠️