Web调试技巧——对象跟踪

﹏ヽ暗。殇╰゛Y 2024-02-17 22:54 70阅读 0赞

做web的离不开两个常用对象：json 对象 和 dom 对象

有的时候在调试的时候知道得到的是个对象，也对这个对象做点儿“手脚”，可是就是不知道

这个对象中用什么东西？这下就郁闷了，进入了浑浑噩噩的疯狂试验中~~~~~

现在说一下如何简单区分上面的两个对象（所有测试都是在IE中进行，不保证其它浏览器支持！）

调试步骤：——————————————————

1.确定对象类型

很简单了，使用alert 弹出看看弹出内容是什么就OK了

如果弹出的内容是 \[Object Object\] ，那多半就是 json 对象了

如果弹出的内容类似\[object HTML.......\] 格式，那肯定是 html 的 dom 对象了

2.确定了对象类型，接下来就是要看对象的代码段内容了

2.1 如果是 HTML DOM 对象

直接用 alert(dom1.outerHTML); 就可以弹出 dom 元素了

2.2 如果是 json 对对象

使用 alert(String.toSerialize(myjson)); 就OK了

注意：String.toSerialize() 方法是自己封装的

测试代码段如下：——————————————————

<body>  
<div id="mydiv">  
<span id ="myspan" >hello world!</span>  
</div>  
<input type="button" onClick="test()" value="Test"></button>

<script language="javascript">  
var myjson=\[\{id:"i1",value:"v1"\},\{id:"i2",value:"v2"\}\]  
var dom1 = document.getElementById("mydiv");  
function test()  
\{  
//1.查看对象类型  
alert(dom1);  
alert(myjson);

//2.发序列化对象对象内容  
//2.1 如果是 dom 元素  
alert(dom1.outerHTML);  
//2.2 如果是 json 元素  
alert(String.toSerialize(myjson));

\}

String.format = function (str)  
\{  
if (arguments.length == 0)  
return null;

var str = arguments\[0\];  
for (var i = 1; i < arguments.length; i++)  
\{  
var re = new RegExp('\\\\\{' + (i - 1) + '\\\\\}', 'gm');  
str = str.replace(re, arguments\[i\]);  
\}  
return str;  
\};  
/\*对string 对象的扩展\*/  
/\*对象序列化为字符串\*/  
String.toSerialize = function (obj)  
\{  
var ransferCharForJavascript = function (s)  
\{  
var newStr = s.replace(  
/\[\\x26\\x27\\x3C\\x3E\\x0D\\x0A\\x22\\x2C\\x5C\\x00\]/g,  
function (c)  
\{  
ascii = c.charCodeAt(0);  
return '\\\\u00' + (ascii < 16 ? '0' + ascii.toString(16) : ascii.toString(16));  
\}  
);  
return newStr;  
\}  
if (obj == null)  
\{  
return null  
\}  
else if (obj.constructor == Array)  
\{  
var builder = \[\];  
builder.push("\[");  
for (var index in obj)  
\{  
if (typeof obj\[index\] == "function") continue;  
if (index > 0) builder.push(",");  
builder.push(String.toSerialize(obj\[index\]));  
\}  
builder.push("\]");  
return builder.join("");  
\}  
else if (obj.constructor == Object)  
\{  
var builder = \[\];  
builder.push("\{");  
var index = 0;  
for (var key in obj)  
\{  
if (typeof obj\[key\] == "function") continue;  
if (index > 0) builder.push(",");  
builder.push(String.format("\\"\{0\}\\":\{1\}", key, String.toSerialize(obj\[key\])));  
index++;  
\}  
builder.push("\}");  
return builder.join("");  
\}  
else if (obj.constructor == Boolean)  
\{  
return obj.toString();  
\}  
else if (obj.constructor == Number)  
\{  
return obj.toString();  
\}  
else if (obj.constructor == String)  
\{  
return String.format('"\{0\}"', ransferCharForJavascript(obj));  
\}  
else if (obj.constructor == Date)  
\{  
return String.format('\{"\_\_DataType":"Date","\_\_thisue":\{0\}\}', obj.getTime() - (new Date(1970, 0, 1, 0, 0, 0)).getTime());  
\}  
else if (this.toString != undefined)  
\{  
return String.toSerialize(obj);  
\}  
\};  
</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python web开发：常见错误和调试技巧

在Python Web开发中，常见的错误包括语法错误、逻辑错误、运行时错误等。以下是一些调试技巧： 1. **代码审查**：首先检查你的代码，确保没有明显的语法错误。 2.

╰+哭是因爲堅強的太久メ/ 2025年01月03日 07:18/ 0 赞/ 30 阅读

相关 Python Web开发：常见错误和调试技巧分享

在Python的Web开发中，常见的错误以及调试技巧主要包括以下几个方面： 1. **语法错误**：这是最基础的错误，比如括号不匹配、缩进错误等。这类错误通常在编译阶段就能发

太过爱你忘了你带给我的痛/ 2024年12月18日 00:33/ 0 赞/ 70 阅读

相关理解和调试Java异常堆栈跟踪技巧案例

Java的异常堆栈跟踪是开发者理解代码运行过程中问题的重要途径。以下是一些理解和调试异常堆栈跟踪的技巧案例： 1. 确认异常类型：在堆栈跟踪中，通常第一行会显示引发异常的具体

柔情只为你懂/ 2024年10月21日 22:18/ 0 赞/ 60 阅读

相关 Java Web开发：常见错误和调试技巧实例

在Java Web开发中，常见的错误和调试技巧包括： 1. **语法错误**：这是最常见的错误，比如拼写错误、括号未闭合等。调试时，IDE会提示错误位置。 2. **逻辑错

布满荆棘的人生/ 2024年09月20日 00:54/ 0 赞/ 95 阅读

相关 Web调试技巧——对象跟踪

做web的离不开两个常用对象：json 对象和 dom 对象有的时候在调试的时候知道得到的是个对象，也对这个对象做点儿“手脚”，可是就是不知道这个对象中用什么东西？这

﹏ヽ暗。殇╰゛Y/ 2024年02月17日 22:54/ 0 赞/ 71 阅读

相关 WEB会话跟踪

一、什么叫会话跟踪记录用户一段时间内的逻辑上相关联的不同访问请求个过程叫“会话跟踪”。通过用户在每次对服务请求时的唯一标识，可以跟踪会话。二、会话跟踪产生的原因

秒速五厘米/ 2023年10月17日 11:34/ 0 赞/ 141 阅读

相关 java web状态跟踪_Java Web 会话跟踪（四）

会话跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术有Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服

忘是亡心i/ 2022年11月10日 01:19/ 0 赞/ 226 阅读

相关源代码跟踪技巧

源代码跟踪技巧一、在本机源代码编译调试二、注意控制台的输出日志三、一个断点包含多个方法调用时，可以用鼠标指定进入哪个方法调用。四、可以用E

今天药忘吃喽~/ 2022年09月09日 04:53/ 0 赞/ 145 阅读

相关【JavaScript】console控制台调试技巧 | JavaScript调试技巧

　　对于前端开发者来说，在开发过程中需要监控某些表达式或变量的值的时候，用 debugger 会显得过于笨重，取而代之则是会将值输出到控制台上方便调试。最常用的语句就是cons

分手后的思念是犯贱/ 2022年06月05日 05:42/ 0 赞/ 842 阅读

相关 shiro认证调试过程跟踪

一问题提出看代码时候，我看到下面一个函数verify，我想弄清楚代码是怎么跑到这个函数。 / @className: JwtUtil @de

妖狐艹你老母/ 2021年07月24日 13:59/ 0 赞/ 376 阅读