Chrome F12调试动态生成页面JS脚本无法设置断点问题求助

你遇到的问题根源是：通过document.write写入新窗口的内容没有关联的实际请求URL，Chrome开发者工具不会将其中嵌入的脚本纳入「源」面板的可调试文件列表，因此无法找到对应脚本设置断点。下面给出两种可直接落地的解决方案，都满足POST传参生成页面+可调试的需求：

方案1：添加sourceURL标记（改动最小，无需改后端逻辑） #

只需要在写入页面前给脚本追加特殊注释标记，Chrome会自动将对应脚本识别为独立的可调试文件，展示在源标签页的「无域名」分类下：

var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/test/tipoManufatto", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var new_window = window.open(null, '');
        // 给所有内联脚本追加sourceURL标记
        let processedHtml = this.responseText.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match, attrs, code) => {
            return `<script${attrs}>${code}\n//# sourceURL=user-custom-script.js\n<\/script>`
        })
        new_window.document.write(processedHtml);
        new_window.document.close(); // 必须加这行结束文档流，否则浏览器会判定页面还在加载中
    }
};
xhttp.send(JSON.stringify($scope.tc.selected));

方案2：表单POST跳转新窗口（调试体验最优） #

用原生表单提交的方式打开新窗口，页面是浏览器原生加载的，所有资源都会正常出现在源面板中，调试体验和普通静态页面完全一致，仅需要后端适配参数接收逻辑即可：

// 创建临时POST表单
const tempForm = document.createElement('form');
tempForm.method = 'POST';
tempForm.action = '/test/tipoManufatto';
tempForm.target = '_blank'; // 指定在新窗口打开响应

// 填充参数
const paramField = document.createElement('input');
paramField.type = 'hidden';
paramField.name = 'requestData';
paramField.value = JSON.stringify($scope.tc.selected);
tempForm.appendChild(paramField);

// 提交后自动销毁临时表单
document.body.appendChild(tempForm);
tempForm.submit();
document.body.removeChild(tempForm);

后端仅需要将原来的读取请求体JSON逻辑，改为读取POST表单的requestData字段再做JSON解析即可，改造成本极低。

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