2015-01-02 23 views
-1

TL; DR:我的問題是:什麼是調試流星應用程序的HTML的最佳方式?如何調試流星應用程序的HTML?

我是一個嘗試將Themeforest上購買的現有HTML主題移植到流星的noob。主題以HTML + JS形式提供。

第一步是創建一個包含配置主題所有選項的HTML頁面。然後我改變了目錄結構和JS庫組織。這一步很簡單,因爲我可以簡單地打開HTML頁面,檢查彈出的HTML錯誤,然後添加CSS/JS或更改引用的路徑以匹配新的文件夾組織。

我現在試圖用我的流星應用程序使用這個HTML。我已經遙遙領先,因爲這個網頁已經顯示出很多已經有效的東西。不工作的大多是CSS/JS衝突,如果我可以像使用純HTML那樣檢查HTML錯誤,這很容易解決。無論如何,頁面的源代碼主要是對JS庫的引用,沒有HTML標籤,並且chrome控制檯不會顯示任何有意義的錯誤。

這可能是我錯過了一些非常基本的東西,也許我需要安裝一些Chrome插件來幫助我調試東西,或者我誤解了有關流星的東西。我認爲流星動態生成頁面,這就是爲什麼我看到大多數JS和源代碼中沒有HTML,並且可能的解決方案可能是以某種方式從流星中獲取靜態版本的頁面。

我的問題是:什麼是調試流星應用程序的HTML的最佳方式?

編輯說明:我會進一步解釋自己,以幫助您瞭解場景:主題使用Bootstrap。當我創建自定義HTML頁面時,我升級了Bootstrap,並且必須更改代碼中的一些引用。這很容易,因爲Chrome向我展示了哪些屬性和資產無法加載。

現在我正在使用Meteor Bootstrap CSS包,並再次打破主題。總之,由於我現在沒有從Chrome控制檯得到任何錯誤,所以很難理解什麼是不工作的

+0

在這種情況下還是在一般情況下? 「調試HTML」的意思是查看源代碼,以便查看哪些資源無法加載。 – Mascarpone

+4

您好,您應該使用控制檯工具檢查您的HTML,查看下載的資源文件等。在Firefox中,您可以使用FireBug,在Chrome中您可以使用內置的控制檯。通常你可以在瀏覽器窗口中右鍵點擊並選擇inspect元素來獲得該瀏覽器的開發工具 – Scriptable

+0

這就是我用純html做的,但現在我使用meteor HTML被動態加載,並且我只在我檢查時纔得到javascript源代碼。 – Mascarpone

回答

2

如果沒有清楚地說明什麼不起作用,那很難提供幫助。但是,您的問題可能與流星「重新包裝」(不確定它是否合適)以及在將所有CSS和JS文件發送給客戶端之前縮小相關。 最近我在我的項目中添加了第三方JS文件時遇到了很多問題。爲了解決這個問題,當沒有官方的Atmosphere包時,我把所有的JS庫放在客戶端/兼容性中。因此,流星不會重新打包這些文件,並且在所有其他文件之前將它們加載到客戶端上。 希望這會解決你的問題。

+0

在'客戶端/ compatibility'的東西實際上是第一次加載,先於其他正常的JS文件。 http://docs.meteor.com/#/full/structuringyourapp – fuzzybabybunny

+0

謝謝,你是對的,我編輯了我的答案。 – Guillaume