2. 程式人生 > >vue 原始碼 斷點除錯

vue 原始碼 斷點除錯

阿新 • • 發佈：2018-11-20

1、新增sourceMap

sourceMap: true

 

2、npm run dev 會生成vue.js.map

3、斷點除錯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue原始碼測試</title>
    </head>
    <body>
        <div id="app">
            <
 
div v-for="item in list">
                {{ item }}
            </div>
        </div>

        <script src="./vue.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    list: [
 
1, 2, 3]
                }
            })
        </script>

    </body>
</html>

 

相關推薦

vue 原始碼 斷點除錯

1、新增sourceMap sourceMap: true   2、npm run dev 會生成vue.js.map 3、斷點除錯 <!DOCTYPE html> <html> <head>

使用Qt Creator作為Linux IDE，實現Redis原始碼編譯和斷點除錯

2、原始碼準備 我們解壓原始碼，先使用gcc編譯，主要的目的是把deps庫編譯出來 [[email protected] redis_study]# chmod -R 777 re

RN使用google瀏覽器斷點除錯,沒有原始碼，不能斷點除錯

RN使用google瀏覽器斷點除錯時，debuggerWorker.js下面沒有原始碼。 最終發現使用本機的ip地址（192.168.17.105:8081/debugger-ui/），訪問不到。使用localhost就正常了（http://localhost:8081/debugger-ui/），原因不詳，

解決eclipse無法斷點除錯JDK原始碼的問題

最近換了新版的eclipse，在jdk原始碼裡面，打斷點發現無法進入原始碼除錯，程式直接跳過，已查資料發現自己eclipse配置的是jre環境的。 此處要配成jdk目錄才有效 開啟preferences，點選java ，在點選installed JRES

vue原始碼除錯踩坑記錄

目的: 可以斷點除錯vue的原始碼, 研究一個new vue({...})以及data的更新在vue原始碼內部是如何執行的 目前做到了, 其實比較簡單, 也不知道為什麼會弄了一天… 遇到的問題有2個, 其中一個是坑 一: 其實git clone re

JavaSE_day6_eclipse的快捷鍵_____文件註釋____jar包______斷點除錯

單行註釋(取消單行註釋)：ctrl+/ 多行註釋：ctrl+shift+/          注意：要選中 取消多行註釋：ctrl+shift+\ 導包的快捷鍵：ctrl+shift+o 移動當前程式碼：Alt+上或下箭頭鍵 複製

pycharm的斷點除錯【轉自https://blog.csdn.net/weixin_39198406/article/details/78873120】

1. show execution point (F10)顯示目前專案所有斷點2. step over (F8)下一步但僅限於設定斷點的檔案3. step into (F7)執行下一行4. step into my code (Alt+Shift+F7)執行下一行但忽略libraries（匯入庫的語句）5.

vue-原始碼剖析-雙向繫結

專案中vue比較多，大概知道實現，最近翻了一下雙向繫結的程式碼，這裡寫一下閱讀後的理解。 專案目錄 拉到vue的程式碼之後，首先來看一下專案目錄，因為本文講的是雙向繫結，所以這裡主要看雙向繫結這塊的程式碼。 入口 從入口開始：src/core/index.js index

vue原始碼探究---讀vue技術揭祕（1）

需要了解 RollUp Flow RollUp Rollup是一個js的模組打包器，可以將小塊程式碼編譯成大塊複雜程式碼，那為什麼這樣做呢，為了降低開發問題時候的複雜度 Tree-shaking（搖樹優化） 除了使用ES6的模組外，Rollup還能靜態分析程式碼中

vue原始碼學習——觀察者模式

情景：接觸過vue的同學都知道，我們曾經都很好奇為什麼vue能這麼方便的進行資料處理，當一個物件的某個狀態改變之後，只要依賴這個資料顯示的部分也會發生改變，如果你依舊很好奇，那麼今天你就可以瞭解一下實現的原理 什麼是觀察者模式​​​​​​​    官方解釋是

vue原始碼學習——資料雙向繫結的Object.defineProperty

情景：vue雙向繫結，這應該是多數講vue優勢脫口而出的名詞，然後你就會接觸到一個方法 Object.defineProperty(a,"b",{}) 這個方法該怎麼用 簡單例子敲一下 var a = {} Object.defineProperty(a,"b

Vue原始碼學習（二）——生命週期

官網對生命週期給出了一個比較完成的流程圖，如下所示： 從圖中我們可以看到我們的Vue建立的過程要經過以下的鉤子函式： beforeCreate =&gt; created =&gt; beforeMount =&gt; mounted =&gt; beforeUpda

Vue原始碼閱讀--過濾器

過濾器 作用 ： 用於一些常見的文字格式化 使用方式： 過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示： <!-- 在雙花括號中 --> {{ message |

Spring原始碼分析——除錯環境搭建（可能是最省事的構建方法）

1. 依賴工具 idea git jdk 1.8 + Gradle 2. 獲取原始碼 　　從github https://github.com/spring-projects/spring-framework 上 Fork 出屬於自己的倉庫。如果懶得這麼做也可以

Vue 原始碼分析之proxy代理

Vue 原始碼分析之proxy代理 當我們在使用Vue進行資料設定時，通常初始化格式為: let data = { age: 12, name: 'yang' } // 例項化Vue物件 let vm = new Vue({ data })

使用pycharm除錯django 打斷點除錯後臺程式碼

第一步 第二步 第三步 第四步 Script path:C:\pythonProject\Code\mysite\manage.py Parameters: runserver 遠端訪問的話  遠端除錯Django專案配置如下: 1>runserver i

斷點除錯各個按鈕含義

第一行從左到右依次是： Step Over：在單步執行時，在函式內遇到子函式時不會進入子函式內單步執行，而是將子函式整個執行完再停止，也就是把子函式整個作為一步。在沒有子函式時，和Step Into效果一樣。 Step Into：單步執行，遇見子函式就進入繼續執行； Force Ste

Python 基礎 一張圖告訴你PyCharm如何進行斷點除錯

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Jquery等待ajax執行完畢繼續執行（斷點除錯正常，執行異常）

以前寫過一個程式，發現用斷點除錯的時候，一步步的執行，程式是可以的，但是去了斷點程式就出現了問題。  $(document).ready(function(){      var arra=new Array();   &n

Android Studio 開啟Annotation Processor斷點除錯

往gradle.properties檔案中新增如下兩行(本教程中是在~/.gradle/gradle.properties檔案中新增) org.gradle.jvmargs=-agentlib:jdwp=transport=dt_socket,server=y,suspend=