前端開闢，有一項很主要的基礎功，就是在大型項目中，比方几萬行js代碼中，敏捷找到新增功用或調試bug的切入點。特別是你只是接辦這個項目，並不相識个中每個功用點地點的位置，也沒有時刻一行行讀代碼的狀況，這個基礎功顯得特別主要。
這項才能除了純熟的調試東西運用技能，更主要的照樣對變化的視察力和總結歸結的才能。本文用一個講一個功用案例的完成。
功用背景
一款大型canvas運用。我們運用了一些開源庫完成canvas上的筆墨與html筆墨的互轉。使我們能夠在一個輸入框中輸入筆墨然後繪製到canvas上去。也能夠點擊canvas上的筆墨然後經由歷程開源庫舉行筆墨編輯。
要完成功用
我們的canvas運用有團體放大減少的功用。然則文本輸入與我們的canvas運用是兩個差別的系統，如今我們要對這個文本輸入相干的庫舉行對應的放大減少的調解。在canvas運用處於放大減少的場景，text輸入框對應放大減少。並且在放大減少的場景下對輸入框中的字體的放大減少，在回歸到一般大小的時刻。顯現與100%時設置的字體大小雷同。
現在的狀況是運用處於放大狀況時，輸入內容以及轉化到canvas上的大小依舊是畫布100%時的大小。然後當畫布變回一般大小，之前繪製到canvas上的的文本就小的沒法看了。
canvas運用放到大300%時文本組件的狀況：
canvas運用放到大300%時繪製到canvas上的文本：
canvas運用回到一般100%時繪製到canvas上的文本狀況：
完成
起首視察輸入框的大小什麼決議。要先視察輸入框的構成構造。檢察elements，發明它是dom構造，沒有在iframe中，也不是canvas繪製，先松一口氣，看來僅僅是dom上的變更。
然後我們在輸入框中輸入，同時視察右側dom構造有什麼變化。發明輸入到第二個字符的時刻多了一個帶內聯屬性的font-size的span，我們輸入的內定到這個span標籤中。
然後經由歷程輸入組件的東西欄把輸入的字體調解到其他字號。發明內聯的font-size有變化。字體變大。輸入框變大。
猜想輸入框大小跟這個字號有關聯。
在差別的縮放比例下，依據我們的縮放比例乘以100%狀況下的的字體大小。就是在該比例下的大小了。
起首看span是怎樣到場進去的，監聽p的子節點變化。加一個dom斷點。
監聽到了appendChild。然後檢察挪用棧。
定位到這個位置，看到是在這裏給span設置了14px的默許大小，修正它：
var scaleValue = $("#zoomIn-container").attr('data-float')||1;
me.mark('fontsize', 14*scaleValue);革新，發明翻開輸入框，輸入框大小跟之前一樣，輸入第一個字時還跟之前一樣，輸入第二個字母，span出來以後，字體和輸入框就變成當前比例下我們想要的大小了。
別的，發明那句代碼有一句解釋 16 to 14。
猜想之前有一次默許字體大小從16到14的團體修改。假如我們全局搜刮一下16 to 14這個修改，或許會有意想不到的發明。
那末第一個字母的大小由什麼決議？用chrome一看，由css決議。父元素的font-size決議。所以如今我們父元素的css要動態修正。在初始化輸入框的時刻就要設置好內聯的css。怎樣曉得在那裡初始化的文本dom，那裡改？
視察，發明輸入框消逝以後，全部輸入框相干的節點都消逝了。猜想全部輸入相干的節點由js動態天生。因而全局搜刮class名。
果真搜到，然後在dom初始化以後的代碼中到場以下代碼，設置字體大小。
// ls20180523 把傳入的字體大小。依據當前比例做一個縮放。
var scaleValue = $("#zoomIn-container").attr('data-float') || 1;
$container.find(id).css('font-size',14*scaleValue);革新。初始框變大。第一個字母變大。繼承輸入字體依舊變大。
但是輸入第一個字母，點出去，發明繪製到canvas上的依舊是100%狀況下的14px。而輸入多個字符的時刻，字體是該比例下的大小。由於上面的視察我們曉得只需一個字母的時刻是沒有span天生的，所以能夠對發生的canvas字體有影響。 那末我們txt轉canvas的函數能夠也須要修正。
這個函數在那裡？是否是有如許一個函數？有什麼要領曉得？由前面的視察我們發明點出去的時刻文本組件相干dom是會消逝的。因而，斷點它。
在挪用棧里發明如許一個函數。堅決進去看一看。
然後在這個函數里設置斷點。從新操縱，在裏面一步步走一下。
很容易地，我們找到這個函數，並終究定位到這行代碼。修正之。
//ls20180524 依據縮放比例調解。
var scaleValue = $("#zoomIn-container").attr('data-float')||1;
result = '<p><span style="font-size: ' + 14 * scaleValue + 'px; font-family: arial; color: rgb(0, 0, 0);">' + matchTarget[1] + '</span></p>';再測試。發明只輸入一個字。到canvas上大小準確。
但是湧現了新的題目。如圖。這個字號設置的處所。顯現變成了我們現實的大小值。現實應當顯現的是我們dom上設置的大小值除以當前頁面比例的值，才是我們100%比例時刻的值。我們要找到它在那裡修正的。視察這個節點是什麼時候從14變成這個值的。然後設置斷點視察節點更改。到這個賦值的處所給值舉行一個換算就能夠了。
然後剩下末了一個功用。修正字號。修正字號后我們框里的字體大小應當是縮放后的比例下的這個字號的大小。只需監測相干節點的更改，然後切換一下字號，就能夠找到設置span大小的節點。都很好修正了。
到這裏這個功用就基礎完成，哪怕是一個剛接辦的項目，全部功用修正歷程也不凌駕2小時。固然，後續另有題目要斟酌，比方高分屏裝備像素比的題目。
修正後，canvas運用放大300%時的字體組件：
總結
到這我們就基礎完成了我們的功用，代碼量很小。要注意修正其他人代碼的時刻，要斟酌修正的處所的要領的作用，運用範圍等。只管保證自已寫的東西不會影響到其他能夠的邏輯，要從代碼編寫者的角度舉行多方面的思索。關於第三方庫的運用，我們起首要斟酌庫原有接口的組合運用，在原有接口不足的狀況下才斟酌修正源碼。
經由歷程視察剖析和斷點技能，我們很容易地就從一個大型項目幾萬行代碼中敏捷定位到我們要修正的處所。
github地點：https://github.com/liusaint/l…
