Additions to js debug code
This commit is contained in:
parent
489786aadc
commit
003a115923
12 changed files with 400 additions and 370 deletions
|
|
@ -1,11 +1,3 @@
|
|||
// Setup
|
||||
// -----------------------------------------------------------------------------
|
||||
setup();
|
||||
|
||||
// DOM ready
|
||||
// -----------------------------------------------------------------------------
|
||||
$(document).ready(function () {
|
||||
'use strict';
|
||||
|
||||
// logPerf('DOM ready.');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,20 +13,35 @@
|
|||
{% block body %}
|
||||
<div class="wrap">
|
||||
<div class="hello">
|
||||
<h2>This is {{ hippie.brand | upper }}</h2>
|
||||
<h2>This is
|
||||
{{ hippie.brand | upper }}</h2>
|
||||
<p>You can start using it by replacing this file with your own index page.</p>
|
||||
<p>To do this you need to create a file <code>/index.njk</code> inside the <i>source/screens</i> folder. You can also create a <code>data.json</code> file inside the <i>source/templates</i> folder as a data source for your nunjucks files.</p>
|
||||
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <i>/source/screens/demo</i>.</p>
|
||||
<p>The <i>source/demo</i> folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||
<p>To do this you need to create a file
|
||||
<code>/index.njk</code>
|
||||
inside the
|
||||
<i>source/screens</i>
|
||||
folder. You can also create a
|
||||
<code>data.json</code>
|
||||
file inside the
|
||||
<i>source/templates</i>
|
||||
folder as a data source for your nunjucks files.</p>
|
||||
<p>For a very basic start you can make a copy of the demo page
|
||||
<code>blank.njk</code>. You can find it at
|
||||
<i>/source/screens/demo</i>.</p>
|
||||
<p>The
|
||||
<i>source/demo</i>
|
||||
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
|
||||
<div class="pos_rel">
|
||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
|
||||
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
|
||||
<h3>Overview</h3>
|
||||
</div>
|
||||
<nav>
|
||||
<ul class="list_link">
|
||||
<!-- Loops through "demoadditionallinks" array -->
|
||||
{% for link in data.demoadditionallinks %}
|
||||
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
|
||||
<li>
|
||||
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -34,7 +49,9 @@
|
|||
<ul class="list_link">
|
||||
<!-- Loops through "demo-links" array -->
|
||||
{% for link in data.demolinks %}
|
||||
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
|
||||
<li>
|
||||
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -48,10 +65,10 @@
|
|||
// Page specific
|
||||
// ------------------------------------------------------------------------------
|
||||
assetsLoaded = true;
|
||||
logPerf('Assets loaded.', assetsLoaded);
|
||||
logPerf('BODY :: Assets loaded, running page specific script...');
|
||||
$(document).ready(function () {
|
||||
logPerf('JQ document \'ready\' event fired.');
|
||||
});
|
||||
logPerf('EVENT :: jQuery \'ready\' event fired.');
|
||||
logPerf('Application ready.');
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -5,7 +5,8 @@
|
|||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
|
||||
<title>
|
||||
{% block title %}{% endblock %}{{ hippie.titlePrefix }}</title>
|
||||
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{# <base href="/"> #}
|
||||
|
|
@ -14,11 +15,10 @@
|
|||
{% include "hippie/partials/_head_script.njk" %}
|
||||
<script>
|
||||
debugOn = true;
|
||||
logPerf('Debugging performance', debugOn);
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
logPerf('Document \'DOMContentLoaded\' event fired.');
|
||||
logPerf('EVENT :: Document \'DOMContentLoaded\' event fired.');
|
||||
});
|
||||
logPerf('On HEAD, starting...');
|
||||
logPerf('HEAD start :: Debugging performance...', debugOn);
|
||||
</script>
|
||||
|
||||
{% include "demo/partials/_links.njk" %}
|
||||
|
|
@ -27,20 +27,26 @@
|
|||
{# <link rel="stylesheet" type="text/css" media="all" href="{{ hippie.pageBase | subdir(2) }}css/demo.css"/> #}
|
||||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
{% endblock %}
|
||||
<script>
|
||||
logPerf('HEAD end :: Links loaded.');
|
||||
</script>
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
<script>
|
||||
logPerf('BODY start');
|
||||
</script>
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
logPerf('Inline JS at bottom of BODY. Loading assets...');
|
||||
logPerf('BODY :: Loading script assets...');
|
||||
</script>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
{% endblock %}
|
||||
<script>
|
||||
logPerf('BODY end :: Page script might still be loading.');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,7 +5,9 @@
|
|||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{% block title %}{% endblock %} - HIPPIE</title>
|
||||
<title>
|
||||
{% block title %}{% endblock %}
|
||||
- HIPPIE</title>
|
||||
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
|
|
@ -13,21 +15,16 @@
|
|||
{% include "hippie/partials/_head_script.njk" %}
|
||||
<script>
|
||||
debugOn = true;
|
||||
logPerf('Debugging performance', debugOn);
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
logPerf('Document \'DOMContentLoaded\' event fired.');
|
||||
logPerf('EVENT :: Document \'DOMContentLoaded\' event fired.');
|
||||
});
|
||||
logPerf('On HEAD, starting...');
|
||||
logPerf('HEAD start :: Debugging performance...', debugOn);
|
||||
</script>
|
||||
|
||||
{% include "demo/partials/_links.njk" %}
|
||||
{% block links %}
|
||||
<!--[if lte IE 9]>
|
||||
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--[if lte IE 9]>
|
||||
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
||||
<![endif]-->
|
||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
|
||||
<!--[if lte IE 9]> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script> <![endif]-->
|
||||
<!--Local alternative: <script src="./code/html5shiv.min.js"></script>-->
|
||||
<!--Only use one of the above!-->
|
||||
|
||||
|
|
@ -35,10 +32,16 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
<link rel="stylesheet" type="text/css" media="all" href="{{ pageBase }}css/demo.css"/>
|
||||
<!-- <link rel="stylesheet" type="text/css" media="print" href="{{ pageBase }}css/print.css"/> -->
|
||||
{% endblock %}
|
||||
<script>
|
||||
logPerf('HEAD end :: Links loaded.');
|
||||
</script>
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
<body class="{{ bodyClass }}">
|
||||
<script>
|
||||
logPerf('BODY start');
|
||||
</script>
|
||||
{% include "hippie/partials/_body_hover.njk" %}
|
||||
<div id="root">
|
||||
{% include "hippie/partials/_header.njk" %}
|
||||
|
|
@ -52,13 +55,13 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
{% block script %}
|
||||
<script>
|
||||
logPerf('Inline JS at bottom of BODY. Loading assets...');
|
||||
logPerf('BODY :: Loading script assets...');
|
||||
</script>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
{# <script src="bower_components/jquery/dist/jquery.js"></script> #}
|
||||
{% endblock %}
|
||||
<script>
|
||||
logPerf('BODY end :: Page script loaded.');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,7 +5,9 @@
|
|||
<meta charset="utf-8">
|
||||
|
||||
{% block head %}
|
||||
<title>{% block title %}{% endblock %} - HIPPIE</title>
|
||||
<title>
|
||||
{% block title %}{% endblock %}
|
||||
- HIPPIE</title>
|
||||
|
||||
{% include "demo/partials/_meta.njk" %}
|
||||
{% block meta %}{% endblock %}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,14 @@ function getTimeDiff () {
|
|||
return new Date().getTime() - performance.timing.navigationStart;
|
||||
}
|
||||
|
||||
function pad(n, width, z) {
|
||||
z = z || '0';
|
||||
n = n + '';
|
||||
return n.length >= width
|
||||
? n
|
||||
: new Array(width - n.length + 1).join(z) + n;
|
||||
}
|
||||
|
||||
// log message to console and add
|
||||
// performance measuring information
|
||||
function logPerf(msg, arg) {
|
||||
|
|
@ -27,7 +35,7 @@ function logPerf (msg, arg) {
|
|||
right: '40px',
|
||||
zIndex: '1000',
|
||||
padding: '0 8px',
|
||||
background: 'rgba(255,255,255,.8)',
|
||||
background: 'rgba(255,255,255,.6)',
|
||||
color: 'rgb(128)',
|
||||
fontSize: '1rem'
|
||||
})
|
||||
|
|
@ -36,14 +44,17 @@ function logPerf (msg, arg) {
|
|||
// $('body').prepend('<div style="position:relative;"></div>');
|
||||
// $('div').first().prepend('<div id="jslogPerf" style="position:fixed;bottom:8px;right:16px;z-index:1000;padding:8px;background:rgb(0,255,255,.5)"></div>');
|
||||
}
|
||||
$('#jsLogPerf').append('<p><b>' + getTimeDiff() + '</b>ms :: ' + msg);
|
||||
$('#jsLogPerf').append('<p class="code_solo txt_smaller"><b>' + pad(getTimeDiff(), 5) + '</b>ms :: ' + msg + '</p>');
|
||||
// Alternative short-circuit evaluation
|
||||
// needs element in document but prevents error if not
|
||||
// $log = $log || $('#jslogPerf');
|
||||
// $log.append('<p style="margin-bottom:4px;font-size:.75em;"><b>' + getTimeDiff() + '</b>ms :: ' + msg);
|
||||
}
|
||||
if (window.console) {
|
||||
console.debug(getTimeDiff() + 'ms :: ' + msg, (arg ? arg : ''));
|
||||
console.debug(pad(getTimeDiff(), 5) + 'ms :: ' + msg, (
|
||||
arg
|
||||
? arg
|
||||
: ''));
|
||||
// NOTE Non standard feature. Not available on IE
|
||||
if (console.timeStamp) {
|
||||
console.timeStamp(msg);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
<!-- header.partial -->
|
||||
<header class="header_site">
|
||||
</header>
|
||||
<header class="header_site"></header>
|
||||
Loading…
Add table
Add a link
Reference in a new issue