GithubHelp home page GithubHelp logo

[todo] change layout about python-web-pdb HOT 3 OPEN

hjyssg avatar hjyssg commented on June 9, 2024
[todo] change layout

from python-web-pdb.

Comments (3)

hjyssg avatar hjyssg commented on June 9, 2024
.code-info {
    height: 1000px;
}

from python-web-pdb.

hjyssg avatar hjyssg commented on June 9, 2024

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="icon" href="static/img/debug.png" type="image/png">
  <link rel="icon" href="static/img/debug.svg" type="image/svg+xml">
  <link rel="stylesheet" href="static/styles.min.css">
</head>
<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <div class="navbar-brand"><img src="static/img/debug.svg" width="24" height="24"></div>
        <p id="host" class="navbar-text"></p>
      </div>
    </div>
  </nav>
  <div class="container-fluid language-python">
    <div class="row">

      <!-- control bar -->
      <div class="col-sm-12">
        <div class="btn-group" role="group">
          <button id="next_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="Next line (F10)">
            <span class="glyphicon glyphicon-step-forward"></span>
          </button>
          <button id="step_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="Step into function (F11)">
            <span class="glyphicon glyphicon-import"></span>
          </button>
          <button id="return_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="Return from function (Shift + F11)">
            <span class="glyphicon glyphicon-export"></span>
          </button>
          <button id="continue_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="Continue execution (F8)">
            <span class="glyphicon glyphicon-play"></span>
          </button>
          <button id="up_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="To upper frame">
            <span class="glyphicon glyphicon-arrow-up"></span>
          </button>
          <button id="down_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="To lower frame">
            <span class="glyphicon glyphicon-arrow-down"></span>
          </button>
          <button id="where_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="Print stack trace (where)">
            <span class="glyphicon glyphicon-map-marker"></span>
          </button>
          <button id="help_btn" type="button" class="btn btn-default"
              data-toggle="tooltip" title="Quick help">
            <span class="glyphicon glyphicon-question-sign"></span>
          </button>
        </div>
      </div>



      <!-- code -->
      <div class="col-sm-7">
        <div class="infobox-label">
          <div class="infobox-label-text">
            <strong>Current file:</strong> <samp><span id="filename"></span>(<span id="curr_line"></span>)</samp>
          </div>
        </div>
        <pre id="curr_file" class="line-numbers code-info"><code id="curr_file_code"></code></pre>
      </div>

      <div class="col-sm-5">
        <!-- global -->
        <div class="col-sm-12">
          <div class="infobox-label">
            <div class="infobox-label-text">
              <strong>Globals</strong>
            </div>
          </div>
          <pre class="info"><code id="globals"></code></pre>
        </div>
        <!-- local -->
        <div class="col-sm-12">
          <div class="infobox-label">
            <div class="infobox-label-text">
              <strong>Locals</strong>
            </div>
          </div>
          <pre class="info"><code id="locals"></code></pre>
        </div>
      </div>



      <!-- pbd console -->
      <div class="col-sm-12">
        <div class="infobox-label">
          <div class="infobox-label-text">
            <strong>PDB Console</strong>
          </div>
        </div>
        <pre id="console"><code id="stdout"></code></pre>
      </div>
      <div class="col-sm-12">
        <div class="input-group">
          <div class="input-group-addon">(Pdb)</div>
          <input class="form-control" id="stdin" type="text">
          <span class="input-group-btn">
            <a id="send_btn" class="btn btn-default">Send</a>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div id="help_window" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"><span class="glyphicon glyphicon-question-sign"></span> Web-PDB Quick Help</h4>
        </div>
        <div class="modal-body">
          <h5>Web-PDB Shortcuts:</h5>
          <ul>
            <li><kbd>F10</kbd>: proceed to the next line, staying on the current level.</li>
            <li><kbd>F11</kbd>: proceed to the next line and step into a function, if any.</li>
            <li><kbd>Shift + F11</kbd>: step out of the current function.</li>
            <li><kbd>F8</kbd>: continue execution.</li>
            <li><kbd>&uarr;</kbd>: scroll command history from latest to earliest (in the command field).</li>
            <li><kbd>&darr;</kbd>: scroll command history from earliest to latest (in the command field).</li>
            <li><kbd>Enter</kbd>: send a PDB command (from the command field).</li>
            <li>Click on a line number in <strong>Current file</strong> box:
              set or remove a breakpoint.</li>
          </ul>
          <h5>Essential PDB Commands:</h5>
          <ul>
            <li><code>p (var)</code>: print the value of a variable or a Python expression.</li>
            <li><code>pp (var)</code>: print the value of a variable or a Python expression with
              pretty formatting.</li>
            <li><code>!(expr)</code>: execute a Python expression in the current context.</li>
            <li><code>h</code>: print the list of available commands.</li>
            <li><code>h (command)</code>: print quick help for a given command.</li>
            <li><code>restart [args]</code>: restart the program with the given arguments (optional).</li>
            <li><code>q</code>: terminate the current program and quit.</li>
          </ul>
          <p>You can find more detailed info on PDB commands and usage in the
            <a href="https://docs.python.org/3.5/library/pdb.html" target="_blank">
              official Python documentation</a>.
          </p>
          <hr>
          <p>This program is distributed under the terms of
            <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a>.</p>
          <p>&copy; 2016 <a href="mailto:[email protected]">Roman Miroshnychenko</a>.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  <script src="static/bundle.min.js"></script>
</body>
</html>

from python-web-pdb.

hjyssg avatar hjyssg commented on June 9, 2024

related to romanvm#19

from python-web-pdb.

Related Issues (1)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.