最近做调试时需要经常查看IE和Firefox的DOM及属性,可是网上找不到合适的工具,于是自己写了一个,拿出与给大分享,看看有人是否和我一样也有这样的需要.
代码如下:
这个工具有点问题,就是有部分DOM属性显示不了,如:IE下window.screen显示不了子属性,但在Firefox下却能正常显示, 不知道有人是否知道这个问题, 知道的麻烦告诉我一下.
代码如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> HTML DOM Browser </title>
5 <meta name="generator" content="editplus" />
6 <meta name="author" content="" />
7 <meta name="keywords" content="" />
8 <meta name="description" content="" />
9 <style type="text/css" title="">
10 #disp { border: inset 1px; overflow: auto; width: 640px; height: 384px; }
11 .object { background-color: #ccc; cursor: hand; }
12 .property { background: #efefef }
13 #result { border: 2px solid; width: 100%; }
14 </style>
15 <script type="text/javascript" language="javascript">
16 //<![CDATA[
17 function $(o) { return document.getElementById(o); }
18 function about()
19 {
20 var str = "";
21 str += " HTML DOM Browser v1.0\n";
22 str += "=================================\n";
23 str += "Happy everyday to you ^_^ !\n";
24 str += "written by Anders.Zhao\n";
25 str += "visit http://anders.zhao.cnblogs.com/ to get new version.\n";
26 alert(str);
27 }
28 function pressEnterKey(evt, path)
29 {
30 if (evt == null) evt == window.event;
31 if (evt.keyCode == 13)
32 {
33 showObject(path);
34 }
35 }
36 function getParent(s)
37 {
38 var pos = s.lastIndexOf(".");
39 var ret = pos == -1 ? s : s.substr(0, pos);
40 return ret;
41 }
42 function html2dtext(html)
43 {
44 //if (isNaN(html)) return "NaN";
45 html += "";
46 html = html.replace(/</g, "<");
47 html = html.replace(/>/g, ">");
48 if (html == "") html = " ";
49 return html;
50 }
51 function showObject(path)
52 {
53 $('property').value = path;
54 document.title = path + " -- HTML DOM Browser";
55 var func = new Function("return " + path + ";");
56
57 var html = "";
58 var objs = func();
59 try
60 {
61 for (var i in objs)
62 {
63 try
64 {
65 var obj = objs[i];
66 var val = html2dtext(obj);
67
68 html += (typeof(obj) == 'object' && obj != null) ? "<tr class=\"object\" onclick=\"showObject('" + path + "." + i + "')\"><td>" + i + "</td><td>" + val + "</td></tr>\n" : "<tr class=\"property\"><td>" + i + "</td><td>" + val + "</td></tr>\n";
69 }
70 catch (e) { }
71 }
72 }
73 catch (e) { }
74 html = "<table id='result'>" + html + "</table>"
75 $("disp").innerHTML = html;
76 }
77 //]]>
78 </script>
79 </head>
80 <body>
81 <input type="text" style="width: 400px;" value="window" id="property" onkeypress="pressEnterKey(event, $('property').value)" />
82 <input type="button" value="Show" onclick="showObject($('property').value)" />
83 <input type="button" value="Back" onclick="showObject(getParent($('property').value))" />
84 <input type="button" value="About" onclick="about()" />
85 <div id="disp"></div>
86 </body>
87 </html>
88
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> HTML DOM Browser </title>
5 <meta name="generator" content="editplus" />
6 <meta name="author" content="" />
7 <meta name="keywords" content="" />
8 <meta name="description" content="" />
9 <style type="text/css" title="">
10 #disp { border: inset 1px; overflow: auto; width: 640px; height: 384px; }
11 .object { background-color: #ccc; cursor: hand; }
12 .property { background: #efefef }
13 #result { border: 2px solid; width: 100%; }
14 </style>
15 <script type="text/javascript" language="javascript">
16 //<![CDATA[
17 function $(o) { return document.getElementById(o); }
18 function about()
19 {
20 var str = "";
21 str += " HTML DOM Browser v1.0\n";
22 str += "=================================\n";
23 str += "Happy everyday to you ^_^ !\n";
24 str += "written by Anders.Zhao\n";
25 str += "visit http://anders.zhao.cnblogs.com/ to get new version.\n";
26 alert(str);
27 }
28 function pressEnterKey(evt, path)
29 {
30 if (evt == null) evt == window.event;
31 if (evt.keyCode == 13)
32 {
33 showObject(path);
34 }
35 }
36 function getParent(s)
37 {
38 var pos = s.lastIndexOf(".");
39 var ret = pos == -1 ? s : s.substr(0, pos);
40 return ret;
41 }
42 function html2dtext(html)
43 {
44 //if (isNaN(html)) return "NaN";
45 html += "";
46 html = html.replace(/</g, "<");
47 html = html.replace(/>/g, ">");
48 if (html == "") html = " ";
49 return html;
50 }
51 function showObject(path)
52 {
53 $('property').value = path;
54 document.title = path + " -- HTML DOM Browser";
55 var func = new Function("return " + path + ";");
56
57 var html = "";
58 var objs = func();
59 try
60 {
61 for (var i in objs)
62 {
63 try
64 {
65 var obj = objs[i];
66 var val = html2dtext(obj);
67
68 html += (typeof(obj) == 'object' && obj != null) ? "<tr class=\"object\" onclick=\"showObject('" + path + "." + i + "')\"><td>" + i + "</td><td>" + val + "</td></tr>\n" : "<tr class=\"property\"><td>" + i + "</td><td>" + val + "</td></tr>\n";
69 }
70 catch (e) { }
71 }
72 }
73 catch (e) { }
74 html = "<table id='result'>" + html + "</table>"
75 $("disp").innerHTML = html;
76 }
77 //]]>
78 </script>
79 </head>
80 <body>
81 <input type="text" style="width: 400px;" value="window" id="property" onkeypress="pressEnterKey(event, $('property').value)" />
82 <input type="button" value="Show" onclick="showObject($('property').value)" />
83 <input type="button" value="Back" onclick="showObject(getParent($('property').value))" />
84 <input type="button" value="About" onclick="about()" />
85 <div id="disp"></div>
86 </body>
87 </html>
88
这个工具有点问题,就是有部分DOM属性显示不了,如:IE下window.screen显示不了子属性,但在Firefox下却能正常显示, 不知道有人是否知道这个问题, 知道的麻烦告诉我一下.
