做項目的時候，有時候會需要查看一下apache的錯誤日志，然后就需要很繁瑣的打開那個目錄下面，看信息，只有當錯誤的時候我才會去打開那個文件。
但是最近我發現在開發的時候，自己忽略掉了很多錯誤，雖然不會導致出錯，但是搞不好哪天就會爆發。
我不高興每次打開那個文件，然后自己又要手動的刷新，太麻煩，所以就自己做了個網頁版的，能夠時時查看錯誤日志。
這個小工具比較簡陋，就是簡單的將文件內容打印到頁面中，並在有新錯誤的時候做個title的閃動小提示。
當有新消息的時候標簽就變成 
用到了三個文件，jquery就不解釋了，一個腳本類庫。兩個php文件的編碼格式我改成了ansi格式，因為一開始調試的時候，從error.txt讀取出來的中文會亂碼。
content.php
這個文件就是用來讀取error.txt的信息的
$path = 'C:\Program Files (x86)\Apache Software Foundation\Apache2.2\logs\error.log';//自定義的路徑 $str = file_get_contents($path); $str = str_replace("\r\n",'<p style="padding:3px 0;margin:0"></p>', $str); $str = str_replace('<script>', '<script>', $str); $str = str_replace('</script>', '</script>', $str); echo ($str);
1、只要將path改成自己的絕對路徑就可以了，還有就是將換行改成了一個p標簽樣式，這里也可以自定義
2、做了點粗糙的<script>過濾，如果不這么過濾，返回到index.php頁面將會執行腳本代碼
index.php
這個文件就是在展示錯誤信息的頁面
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="gbk"/> <title>apache 錯誤日志</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="error"></div> <div id="error_bak" style="display:none"></div> <div id="error_data" style="display:none"></div> <script type="text/javascript"> //腳本邏輯 </script> </body> </html>
1、頁面的格式是gbk
2、有兩三個div用來保存讀取到的錯誤信息，
3、error是用來展示的，后面會做些標簽添加
4、error_bak是用來備份ajax獲取出來的原始信息
5、error_data是將ajax返回的數據與error_bak備份的數據做對比，判斷日志是否有改變
6、腳本邏輯如下所示
<script type="text/javascript"> var move;//定時函數的ID var titleName = document.title;//初始化時的頁面標題 var first = true;//是否是第一次讀取錯誤日志 /** * @method private * @name _setTitle * @description 定時顯示新錯誤信息提示 */ function _setTitle() { var title = document.title; if(title == titleName){ document.title = "【有新錯誤】"; }else{ document.title = titleName; } move = setTimeout('_setTitle()',1000); } /** * @method private * @name _filter * @description 將html標簽過濾掉 * @param str [string] "待過濾的字符串" */ function _filter(str) { return str.replace(/<[^>]+>/g,""); } /** * @method private * @name _get * @description 異步獲取錯誤日志 */ function _get() { var old_bak = $('#error_bak').html();//由於要將新錯誤標紅，這里就要做一個錯誤的備份，下面的判斷都用備份的來做 $.get('content.php', {}, function(data) { $('#error_data').html(data); var current = $('#error_data').html();//添加到html代碼中，再讀取代碼做比較，因為添加到html后會做轉義，與ajax返回的數據就會有出入 if(_filter(current) != _filter(old_bak)) {//與備份的做比較 $('#error').html(data); $('#error_bak').html(data); if(!first) { var red = data.replace(old_bak, ''); $('#error').html(old_bak + '<div style="color:red">'+red+'</div>');//將新錯誤標紅 _setTitle(); } } // console.log(_filter(data)); // console.log(_filter(old_bak)); first = false; }); } $(document).ready(function() { //初始化讀取錯誤日志 _get(); //定時獲取錯誤日志 setInterval(function() { _get(); }, 4000); //在頁面上隨便點擊一下，取消標題定時顯示 $(document).click(function() { document.title = titleName; clearTimeout(move); }); }); </script>
1、用jquery的get來讀取錯誤日志
2、有新錯誤日志的時候，做個小提示
3、有新的日志，才會將頁面內容刷新一下
4、給新的幾行錯誤日志加個顏色區分
5、綁定一個事件取消新錯誤提示
2014-09-22錯誤修正：
1、從content.php中獲取到的data信息在做replace的時候，並沒有替換成功，在把返回的數據添加到html中的時候，html會做一些編碼，導致替換不成功。
function _get() { //.. $.get('content.php', {}, function(data) { //... if(_filter(current) != _filter(old_bak)) {//與備份的做比較 //... if(!first) { var red = $('#error').html().replace(old_bak, ''); //... } } //.. }); }
剛寫的一個比較粗糙的版本，還有很多問題，大家可以根據自己的情況再做修改。
demo下載：
http://download.csdn.net/download/loneleaf1/7916991
2014-09-22錯誤修正demo下載：
http://download.csdn.net/download/loneleaf1/7958451