Webstorm前端開發工具,內置有強大的文件定位功能,下面來看下具體怎麼使用。
操作方法
(01)打開Webstorm,並打開一個項目,在一個html文件裏,我們可以看到有引入了一些js文件。
(02)按住鍵盤上的command鍵(windows上,應該是ctrl鍵),然後鼠標移到這個腳本文件上時,就會出現一個下劃線,點擊鼠標左鍵。
(03)點擊後,在編輯器上就會打開這個腳本文件了,十分方便,在項目文件多時,不再需要逐層查找文件所在的地方了。(引入的css文件,同樣支持這樣打開)
(04)在html文件上的js代碼裏,通過點擊調用的方法,我們也可以定位到其所在的文件。同樣是按住鍵盤上的command鍵,然後點擊這個add_some()方法。
(05)點擊後,同樣會打開定義該方法的文件,還會具體定位到該方法所定義的行裏,如圖,該方法加上了淺淺的背景色。
(06)除了腳本文件能定位得到,我們的樣式文件也同樣能定義,如圖,在一個元素的class裏,我們同樣是按住鍵盤上的command鍵,鼠標移動上去後,就可以看到樣式名會變顏色,還有提示該樣式所在的文件。
(07)鼠標點擊左鍵,則會打開該樣式文件,並者定位到具體的樣式定義上。