如何在Ajax代码中打印变量至Chrome开发者工具控制台？

没问题！要在这个AJAX函数里打印url、type、params、onloadFunction这些变量其实很简单，只需要在函数里添加console.log()语句，Chrome开发者工具的Console面板就能帮你清晰展示这些值。下面是修改后的完整代码，我标注了新增的打印部分：

function ajax_doRefresh(url, type, params, onloadFunction){
    // 新增：打印需要的变量
    console.log("AJAX请求详情:");
    console.log("URL:", url);
    console.log("请求类型(Type):", type);
    console.log("请求参数(Params):", params);
    console.log("回调函数(OnloadFunction):", onloadFunction);

    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    } catch (e) { // Internet Explorer
        try {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    var result = null;
    xmlHttp.onreadystatechange=function() {
        if(xmlHttp.readyState==4) {
            if (xmlHttp.status==200) {
                if(type != null && type.toUpperCase() == "XML")
                    result = xmlHttp.responseXML;
                else
                    result = xmlHttp.responseText;
                if(onloadFunction != null && onloadFunction.length > 0) {
                    var exe_func = onloadFunction + "(result)";
                    eval(exe_func);
                }
                //alert(result);
            } else
                alert("Error retrieving data: status code = " + xmlHttp.status);
        }
    }
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
    xmlHttp.send(params);
}

操作步骤： #

• 打开Chrome开发者工具（按F12或Ctrl+Shift+I）
• 切换到Sources面板，找到ajax_doRefresh函数所在的脚本文件
• 双击函数代码进行编辑，添加上面的console.log语句，按Ctrl+S保存修改（修改仅在当前会话生效，刷新页面后会恢复原代码）
• 触发页面上的AJAX请求，切换到Console面板就能看到打印的变量信息了

额外优化提示： #

• 如果params是编码后的字符串，你可以用decodeURIComponent(params)解码后打印，更易阅读：

  console.log("解码后的请求参数:", decodeURIComponent(params));
  

• 要是想在请求完成后查看结果，还可以在xmlHttp.status==200的分支里添加console.log("请求返回结果:", result);

内容的提问来源于stack exchange，提问作者Padawan