直接检查网页上的控制台

Question

偶尔，我会在禁用“检查”的计算机上做一些web开发，这会使调试JavaScript (一种非常擅长避免错误的语言)变得非常痛苦。

我创建了一个JavaScript文件，当您通过HTML页面上的脚本标记包含它时，它将重写控制台处理程序并向页面底部添加一些元素：

代码：

// https://gist.github.com/UnsignedArduino/e23b8329c3a786d1e4e99d8ee941436e

// Include this JavaScript file in an HTML file and it will add a DIV element to the bottom of the page which will contain console output and
// an textarea to run JavaScript code!

// Set false to do nothing
const on_page_console = true;

if (on_page_console) {
  (() => {
const element_to_append_to = document.body;

element_to_append_to.appendChild(document.createElement("br"));
element_to_append_to.appendChild(document.createElement("br"));
  
const on_page_console_div = document.createElement("div");
on_page_console_div.style.border = "1px outset black";
on_page_console_div.style.padding = "5px";

const warning_b = document.createElement("b");
warning_b.innerHTML = "On page console:";
on_page_console_div.appendChild(warning_b);

element_to_append_to.appendChild(document.createElement("br"));

on_page_console_div.appendChild(document.createElement("br"));

const console_textarea = document.createElement("textarea");
console_textarea.type = "text";
console_textarea.rows = 10;
console_textarea.cols = 40;
console_textarea.id = "command_input";
console_textarea.name = "command_input";
console_textarea.readOnly = true;
console_textarea.style = "width: 100%; resize: vertical; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"
on_page_console_div.appendChild(console_textarea);

on_page_console_div.appendChild(document.createElement("br"));

const command_label = document.createElement("label");
command_label.for = "command_input";
command_label.innerHTML = "Run JavaScript code: " + 
                          "(Remember that you can only run code in the context " + 
                          'of /on_page_console.js - see ' + 
                          'here.)';
on_page_console_div.appendChild(command_label);
  
const command_input = document.createElement("textarea");
command_input.type = "text";
command_input.rows = 10;
command_input.cols = 40;
command_input.id = "command_input";
command_input.name = "command_input";
command_input.style = "width: 100%; resize: vertical; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"
on_page_console_div.appendChild(command_input);
  
on_page_console_div.appendChild(document.createElement("br"));
  
const command_button = document.createElement("button");
command_button.type = "button";
command_button.innerHTML = "Run";
command_button.onclick = () => {
  console.log("Result: " + eval(command_input.value));
};
on_page_console_div.appendChild(command_button);
  
element_to_append_to.appendChild(on_page_console_div);

const auto_scroll = true;
  
// https://stackoverflow.com/a/50773729/10291933

function produce_text(name, args) {
  return args.reduce((output, arg) => {
    return output + (typeof arg === "object" && (JSON || {}).stringify ? JSON.stringify(arg) : arg) + "\n";
  }, "");
}

function rewire_logging_func(name) {
  console["old" + name] = console[name];
  console[name] = (...arguments) => {
    console_textarea.innerHTML += produce_text(name, arguments);;
    console_textarea.scrollTop = console_textarea.scrollHeight;
    console["old" + name].apply(undefined, arguments);
  };
}

function rewire_logging() {
  rewire_logging_func("log");
  rewire_logging_func("debug");
  rewire_logging_func("warn");
  rewire_logging_func("error");
  rewire_logging_func("info");
}
  
window.onerror = (error_msg, url, line_number, col_number, error) => {
  let error_output;
  if (error.stack == null) {
    error_output = error_msg + "\n  URL: " + url + ":" + line_number + ":" + col_number;
  } else {
    error_output = error.stack;
  }
  console.error(error_output);
  return false;
};
  
rewire_logging();
  })();
}

如果需要，这里有一个雷普。

如果我能在代码样式、如何实现这种东西的最佳实践以及性能方面得到帮助(可能很奇怪)，我会很感激。(页面将在执行JavaScript时冻结)注意，这是根据服务器只能提供静态文件而不是注入HTML之类的事实设计的。

Answer 1

以下是我的想法：

tl;dr:页面冻结可能与元素之间共享id有关。其他一些更改可能会修复可读性，这取决于您的首选项。

1. 书页冻结:我无法复制这个，但我猜测是什么原因造成的。您在这两个文本区域之间共享一个id --我认为您复制/粘贴了输出文本区域的代码，以便作为输入文本区域重用。您希望避免重复使用id。
2. 这可能是个人的喜好，所以把它当作它的价值吧。当使用create/append添加html时，我很难读取/解密它。我更喜欢把它写成字符串，最后使用insertAdjacentHTML。(您可以在代码的末尾看到我的方法)。
3. 我重命名/添加了一些变量，以帮助提高可读性和重用性。

• 我把on_page_console改成了showCustomConsole。我认为这会使变量/它在if语句中的用途更容易理解。现在，如果您查看if语句，很明显，在运行已封装的代码之前，我们正在检查什么。
• 我将用于文本区域的id移出html字符串，并将它们定义为变量。这使得重用更容易，如果您想要将id更改为更有意义的东西，只需要在1点中这样做。

1. 造型-我对这件有点犹豫。我通常试图避免内联样式，但你不会有太多这样的事情发生。我注意到您重用了这两个文本区域的样式，所以我将它们保存为字符串，并将它们作为参数插入到consoleHtml字符串中。如果您真的要在其中添加大量的花哨，我建议在样式脚本中使用类来更好地处理样式。
2. 我注意到在您的示例中，输入文本区域中有‘console.log(’这里‘)。您所需要做的就是在输出文本区域中写“这里”，然后得到“结果:这里”。如果您想做一些数学运算，只需输入它(例如，输入区域中的1+1将导致输出区域中的结果:2)。您甚至可以使用变量:让a=1让b=2a+b结果:3
3. 模板文字 -我更喜欢这些而不是字符串。我认为使用这些来读取字符串比较容易，尤其是当您将字符串和变量混合在一起时。
4. 我没有从注释中的堆栈溢出链接中删除基于代码构建的函数。我觉得它们大多是不言自明的。但是，我使用元素的id将console_textarea更改为console_output。我认为这是代码更具可读性的另一个地方，将id存储在变量中有助于避免任何偶然的id重用。

我最初在码页上做过这方面的工作。

const showCustomConsole = true
if(showCustomConsole){
  let documentBody = document.body
  let consoleTitle = `On Page Console:`
  let consoleId = 'console_out'
  let consoleLabel = `Run JavaScript code: 
    (Remember that you can only run code in the context 
    of /on_page_console.js - see 
    here.)
  `
  let scriptId = 'script_in'
  let textAreaStyle = 'style="width: 100%; resize: vertical; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"'
  
  function runHandler(){
    console.log(`Result: ${eval(document.getElementById(scriptId).value)}`)
  }
  
  
  // https://stackoverflow.com/a/50773729/10291933

  function produce_text(name, args) {
    return args.reduce((output, arg) => {
      return output + (typeof arg === "object" && (JSON || {}).stringify ? JSON.stringify(arg) : arg) + "\n";
    }, "");
  }
  
  function rewire_logging_func(name) {
    let console_output = document.getElementById(consoleId)
    console["old" + name] = console[name];
    console[name] = (...arguments) => {
      console_output.innerHTML += produce_text(name, arguments);;
      console_output.scrollTop = console_output.scrollHeight;
      console["old" + name].apply(undefined, arguments);
    };
  }
  
  function rewire_logging() {
    rewire_logging_func("log");
    rewire_logging_func("debug");
    rewire_logging_func("warn");
    rewire_logging_func("error");
    rewire_logging_func("info");
  }
  
  window.onerror = (error_msg, url, line_number, col_number, error) => {
    let error_output;
    if (error.stack == null) {
      error_output = error_msg + "\n  URL: " + url + ":" + line_number + ":" + col_number;
    } else {
      error_output = error.stack;
    }
    console.error(error_output);
    return false;
  };
  
  let consoleHtml = `
    


    
      ${consoleTitle}
      

      
      

      ${consoleLabel}
      
      Run
    
  `
  documentBody.insertAdjacentHTML("beforeend", consoleHtml)
  rewire_logging()
}

  Inspect console directly on a web page


  Sample Web Page