JS中將控制檯log輸出顯示到瀏覽器中

原創

海翔蓝

2020-02-22 09:08

JS中將控制檯log輸出顯示到瀏覽中

一、背景

有時候需要，將返回的請求數據打印在Chrome中的控制檯中，方便對比數據，對比實際返回數據是否和API約定數據一致。這時需要在代碼中添加console.log 片段，將數據限制在瀏覽器的控制檯中。

二、操作

在代碼添加需要返回的數據，並打印出來，在瀏覽器中查看。

（1）在代碼中添加（）：

        console.log(resultXML);//將數據打印

        return resultXML;//返回數據

（2）完整代碼：

        var resultXML = '<assessmentResult>'
            +               '<itemResult>'
            +                   '<outcomeVariable identifier="completionStatus">'
            +                       '<value>' + completionStatus + '</value>'
            +                   '</outcomeVariable>'
            +                   '<outcomeVariable identifier="SCORE">'
            +                       '<value>' + score + '</value>'
            +                   '</outcomeVariable>'
            +                   '<responseVariable identifier="duration">'
            +                       '<candidateResponse>'
            +                           '<value>' + duration + '</value>'
            +                        '</candidateResponse>'
            +                   '</responseVariable>'
            +                   '<responseVariable identifier="numAttempts">'
            +                       '<candidateResponse>'
            +                           '<value>' + numAttempts + '</value>'
            +                        '</candidateResponse>'
            +                   '</responseVariable>'
            +                   '<responseVariable identifier="' + responseObj.identifier + '" cardinality="' + responseObj.cardinality + '" baseType="' + responseObj.baseType + '">'
            +                        '<correctResponse>' + correctResponse + '</correctResponse>'
            +                       '<candidateResponse>' + candidateResponse + '</candidateResponse>'
            +                   '</responseVariable>'
            +               '</itemResult>'
            +            '</assessmentResult>';
        console.log(resultXML);//將數據打印

        return resultXML;//返回數據

（3）在Chrome下的NetWork下查看返回數據，如下圖：

實際返回，將其放在WS下，再按Ctrl+Shift+F，將數據排版成XML格式：

<assessmentResult>
    <itemResult>
        <outcomeVariable identifier="completionStatus">
            <value>FAILED</value>
        </outcomeVariable>
        <outcomeVariable identifier="SCORE">
            <value>0</value>
        </outcomeVariable>
        <responseVariable identifier="duration">
            <candidateResponse>
                <value>6</value>
            </candidateResponse>
        </responseVariable>
        <responseVariable identifier="numAttempts">
            <candidateResponse>
                <value>1</value>
            </candidateResponse>
        </responseVariable>
        <responseVariable identifier="RESPONSE_1-1" cardinality="ordered" baseType="identifier">
            <correctResponse>
                <value>A</value>
                <value>B</value>
                <value>C</value>
                <value>D</value>
                <value>E</value>
            </correctResponse>
            <candidateResponse>
                <value>C</value>
                <value>E</value>
                <value>D</value>
                <value>A</value>
                <value>B</value>
            </candidateResponse>
        </responseVariable>
    </itemResult>
</assessmentResult>

（4）將其和實際開發API對比