在瀏覽器中進行實時預覽

我正在尋找HTML5 + CSS3編輯工具。目前我發現的最好的IDE是Visual Studio 2012.有一個小問題。我想要對我正在創建的內容進行實時預覽。我有多個顯示器，如果沒有切換到瀏覽器並點擊F5（或Ctrl + F5），我將看到我的代碼的結果是完美的。我能做到的唯一方法就是在Firefox或Chrome上使用自動重新加載插件。但它不是一個非常優雅的解決方案。它幾乎可以減慢進程速度，因爲它運行了許多不必要的刷新。在瀏覽器中進行實時預覽

最好的解決方案是以某種方式在瀏覽器（或使用瀏覽器引擎的工具）中在不同的瀏覽器中測試它。另外它有助於我在PHP或ASP.NET中開發服務器端的情況。

或者，如果有一個很好的IDE（VS相比更好），我不會介意使用它，但請注意，我在尋找這些：

實時預覽
智能感知
自動完成功能（例如關閉標籤，報價單等）
主題支持（尤其是黑色）+定製
變焦（不是很重要，但我喜歡的工具支持C +滾動）

來源

2012-08-18 Alireza Noori

如果您正在尋找現場重新加載，請嘗試以下操作：LiveReload。它在Mac上運行得非常好，但也有一個Windows版本的alpha版本。

來源

2012-08-18 15:01:08

從我讀這就是我想要的。儘管我必須測試它。該網站關閉了幾個小時... – 2012-08-18 18:23:46

我認爲它現在正在工作，所以檢查出來;-) – 2012-08-21 16:08:47

我不能讓它在Windows上工作。我插入了JS並使用了瀏覽器擴展。沒有工作。但它看起來像我正在尋找的東西。 – 2012-08-21 20:30:54

我個人更喜歡grunt-contrib-watch（https://github.com/gruntjs/grunt-contrib-watch），因爲它似乎更靈活。我在Gruntfile.js中定義了哪些文件將被監視以進行更改，並在此事件中訂閱我想執行的任何任務。

在dev上。環境項目的網頁有reloader腳本，使頁面刷新，只要通過發射更新事件咕嚕-的contrib手錶

<script src="http://localhost:35729/livereload.js"></script>

它正常工作，給我。這裏是我的咕嚕構建腳本

module.exports = function(grunt) { 

    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-contrib-compass'); 
    grunt.loadNpmTasks("grunt-contrib-jshint"); 
    grunt.loadNpmTasks('grunt-jscs'); 

    grunt.initConfig({ 
    // Lint all the files in js folder 
    jshint: { 
     options: { 
     jshintrc: ".jshintrc" 
     }, 
     all: ["js/**/*.js"] 
    }, 
    // Validate against jQuery coding standard 
    jscs: { 
     options: { 
      "standard": "Jquery" 
     }, 
     all: ["js"] 
    }, 
    // Preprocess SASS 
    compass: { 
     dist: { 
      options: { 
      sassDir: 'sass', 
      cssDir: 'css' 
      } 
     } 
    }, 
    watch: { 
     options: { 
      livereload: true 
     }, 
     css: { 
      files: ['sass/**/*.sass'], 
      tasks: ['compass'] 
     }, 
     js: { 
      files: ['js/**/*.js'], 
      tasks: ['jshint', 'jscs'] 
     } 
     } 
    }); 

    grunt.registerTask("lint", ["jshint", "jscs"]); 
    grunt.registerTask("default", ["watch"]); 

};

當你運行咕嚕你會得到類似的東西

enter image description here

來源

2013-07-12 12:35:09

在瀏覽器中進行實時預覽

回答

相關問題