JS DEBUG page

yuanliweii

于 2017-02-23 15:25:43 发布

阅读量313

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/rrrrrr123rrr/article/details/56673108

版权

js 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在网页中注入调试代码的方法，并演示了如何通过修改窗口事件来更新显示的调试信息。具体实现包括创建固定位置的调试代码展示区域，并记录调用次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class InjectHandle

  injectMethod = null
  callCount = 0
  constructor:()->
    codeTempl = """
      <style media="screen">
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      .debug_code{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        color: #FF0000;
        overflow: auto;
        padding: 20px;
        pointer-events: none;
      }
      </style>
      <div id="debug_code" class="debug_code">
      debug_code
      </div>
    """
    $('body').append(codeTempl)

    injectMethod= window.onChange
    window.onChange = handle

  handle = ()->
    injectMethod()
    $('#debug_code').html("callCount:#{callCount++}")

new InjectHandle();