欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue程序調(diào)試的方法

 更新時(shí)間:2019年06月17日 08:55:51   作者:JerryMouseLi  
這篇文章主要介紹了VUE程序調(diào)試的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

1.寫本文的背景

因?yàn)槌绦虻恼{(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問題所在之處。從而,達(dá)到糾正自己程序錯(cuò)誤的地方,健壯自己的程序,讓問題變得越來越少,程序變得越來越健康。故作此文,而且日后會(huì)將實(shí)用的調(diào)試程序方法不斷進(jìn)行迭代更新。

2.調(diào)試與測(cè)試

調(diào)式與測(cè)試實(shí)際有異曲同工之妙,只不過對(duì)象不同。測(cè)試面向的是產(chǎn)品級(jí),系統(tǒng)級(jí);而調(diào)試往往是程序里的某一部分,某個(gè)方法,某個(gè)屬性或者對(duì)象。最終效果也很類似,好的測(cè)試人員,測(cè)試方案可以將產(chǎn)品系統(tǒng)的問題解決在搖籃中;好的調(diào)試方法也會(huì)讓你對(duì)程序的運(yùn)行理解很深刻,對(duì)問題的查找定位變得很容易,讓軟件運(yùn)行得更穩(wěn)定。

3.Console調(diào)試法

3.1 添加console.log指令

在代碼中添加console.log()方法,這里例子輸出從數(shù)據(jù)庫(kù)讀回來的最高最低溫,詳見如下:

3.2 調(diào)出溫度界面如下

3.3 Google瀏覽器的Console窗口

在Google瀏覽器中按F12,調(diào)出Console窗口如下。


3.4 console.error輸出

將代碼改成Error輸出如下


3.5 瀏覽器輸出

則瀏覽器的Console輸出會(huì)變成紅色如下。


如果輸出的是一個(gè)JS對(duì)象或者數(shù)組,則需要用JSON.stringify方法將其轉(zhuǎn)換成json數(shù)組再輸出,如下
console.log(JSON.stringify(resolve));

4.alert 調(diào)試法

4.1 alert方法代碼

4.2 alert提示效果

備注:alert方法為阻塞式,點(diǎn)擊確定之后,前端代碼才會(huì)繼續(xù)運(yùn)行

5 斷點(diǎn)調(diào)試法

5.1 設(shè)置斷點(diǎn)

設(shè)置斷點(diǎn)debugger如下圖


5.2 運(yùn)行代碼

則運(yùn)行代碼之后,代碼會(huì)自動(dòng)跳到斷點(diǎn),停止運(yùn)行如下


5.3 輸入關(guān)心的屬性

5.3.1 Watch中觀察數(shù)據(jù)

Watch中點(diǎn)“+”,然后點(diǎn)擊回車即可,看到對(duì)應(yīng)數(shù)據(jù)的值。


5.3.2 Console中觀察數(shù)據(jù)

F12選擇瀏覽器Console窗口,輸入需要觀察的變量名,點(diǎn)擊回車,即可看到其對(duì)應(yīng)值。


5.4 輸入想要執(zhí)行的方法

在斷點(diǎn)設(shè)置,停止運(yùn)行后,斷點(diǎn)之前的方法可在Console窗口中運(yùn)行輸出。

5.4.1 寫一個(gè)調(diào)試方法output()

5.4.2 設(shè)置斷點(diǎn)并運(yùn)行程序

詳見5.1,5.2

5.4.3 執(zhí)行方法運(yùn)行程序

可觀察到執(zhí)行結(jié)果如下。


總結(jié)

以上所述是小編給大家介紹的Vue程序調(diào)試的方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • 10個(gè)Vue3中常用的組合式?API用法詳解

    10個(gè)Vue3中常用的組合式?API用法詳解

    通過Vue?3,組合式API增強(qiáng)了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來和大家分享10個(gè)常用的Vue3組合式API,希望對(duì)大家有所幫助
    2024-01-01
  • Vue獲取input值的四種常用方法

    Vue獲取input值的四種常用方法

    Vue是一種流行的Web開發(fā)框架,它提供了一個(gè)雙向綁定的語(yǔ)法糖。在Vue中,我們可以很容易地獲取頁(yè)面上的數(shù)據(jù),并且可以實(shí)時(shí)的響應(yīng)其變化,這篇文章主要給大家介紹了關(guān)于Vue獲取input值的四種常用方法,需要的朋友可以參考下
    2023-09-09
  • 如何實(shí)現(xiàn)雙向綁定mvvm的原理實(shí)現(xiàn)

    如何實(shí)現(xiàn)雙向綁定mvvm的原理實(shí)現(xiàn)

    這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)

    Vue使用高德地圖選點(diǎn)定位搜索定位功能實(shí)現(xiàn)

    這篇文章主要介紹了Vue使用高德地圖選點(diǎn)定位搜索定位功能,文中給大家提到了常見問題解決方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-10-10
  • 開發(fā)Vue樹形組件的示例代碼

    開發(fā)Vue樹形組件的示例代碼

    本篇文章主要介紹了開發(fā)Vue樹形組件的示例代碼,它展現(xiàn)了組件的遞歸使用。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • 基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown(附源碼下載)

    基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown(附源碼下載)

    這是一款基于vue2.0的活動(dòng)倒計(jì)時(shí)組件,可以使用服務(wù)端時(shí)間作為當(dāng)前時(shí)間,在倒計(jì)時(shí)開始和結(jié)束時(shí)可以自定義回調(diào)函數(shù)。這篇文章主要介紹了基于vue2.0的活動(dòng)倒計(jì)時(shí)組件countdown,需要的朋友可以參考下
    2018-10-10
  • Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析

    Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析

    這篇文章主要介紹了Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue接入ts基本方法

    vue接入ts基本方法

    這篇文章主要介紹了vue接入ts基本方法,關(guān)于ts,也出了很久,下面我們就來簡(jiǎn)單學(xué)習(xí)了下ts并且在原有項(xiàng)目上接入基本ts語(yǔ)法,也算是一個(gè)初級(jí)嘗試,簡(jiǎn)單梳理下基礎(chǔ)的接入配置和已經(jīng)遇到的問題,供需要的小伙伴們參考
    2022-01-01
  • 解決vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題

    解決vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題

    這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題的解決方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07
  • Vue3+Element?Plus的項(xiàng)目搭建過程詳解

    Vue3+Element?Plus的項(xiàng)目搭建過程詳解

    這篇文章主要為大家介紹了Vue3+Element?Plus的項(xiàng)目搭建過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08

最新評(píng)論