debug-js-workshop/05.tips.html at master · SBeator/debug-js-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<html>

<head>
  <style>
    button {
      display: block;
      margin: 10px;
    }
  </style>
</head>

<body>

  <h1>The basics of debug</h1>
  <ul>
    <li>console</li>
    <ul>
      <li>console.assert</li>
      <li>console.time/console.timeEnd</li>
      <li>console.table</li>
    </ul>
    <li>Get the element by $0,$1...</li>
    <li>Search all files</li>
    <li><a href="https://github.com/paulirish/devtools-addons/wiki/Snippets">Snippets</a> / bookmark</li>

  </ul>

  <button id="click-to-expand">Click me</button>
  <ul id="panel">
  </ul>

  <button id="click-for-time">Click to show run time</button>
  <button id="click-for-table">Click to show data as table</button>


  <form action="#">
    <div>
      <label for="input1">Input 1:</label><input id="input1" name="input1" required>
    </div>
    <div>
      <label for="input2">Input 2:</label><input id="input2" name="input2" required>
    </div>
    <div>
      <label for="input3">Input 2:</label><input id="input3" name="input3" required>
    </div>
    <div>
      <label for="input4">Input 3:</label><input id="input4" name="input4" required>
    </div>
    <div>
      <label for="input5">Input 4:</label><input id="input5" name="input5" required>
    </div>
    <div>
      <label for="input6">Input 5:</label><input id="input6" name="input6" required>
    </div>

    <button type="submit" >Submit</button>

  </form>


  <script src="05.tips.js"></script>
</body>

</html>