{"id":48618,"date":"2020-04-19T03:01:19","date_gmt":"2020-04-18T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48618"},"modified":"2020-04-19T09:07:05","modified_gmt":"2020-04-18T23:07:05","slug":"google-chrome-developer-tools-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chrome-developer-tools-primer-tutorial\/","title":{"rendered":"Google Chrome Developer Tools Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webinspectorhelp.gif\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chrome Developer Tools Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webinspectorhelp.gif\" title=\"Google Chrome Developer Tools Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Google Chrome Developer Tools Primer Tutorial<\/p><\/div>\n<p>To our mind, all the Web Browser (what we like to term) &#8220;Web Inspectors&#8221; on this MacBook Pro for &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"https:\/\/www.apple.com\/au\/safari\/\" title=\"Safari web browser\">Safari<\/a>&#8216;s (Develop -&gt; Show) Web Inspector<\/li>\n<li><a target=_blank href='http:\/\/www.mozilla.org\/en-US\/firefox\/new\/' title='Firefox home page'>Firefox<\/a>&#8216;s (Tools -&gt; Web Developer -&gt;) Inspector<\/li>\n<li><a target=_blank title='Opera web browser' href='https:\/\/www.opera.com\/'>Opera<\/a>&#8216;s (Developer -&gt;) Developer Tools <\/li>\n<li><a target=_blank title='Google Chrome' href='https:\/\/www.google.com\/chrome\/'>Google Chrome<\/a>&#8216;s (View -&gt; Developer -&gt;) Developer Tools<\/li>\n<\/ul>\n<p> &#8230; are excellent, easy to use, and a great Javascript debugging and CSS styling and generally (HTML) informative webpage client-side tool.<\/p>\n<p>Today, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webinspectorhelp.gif\" title=\"Click picture\">our presentation<\/a> is based on <i>Google Chrome&#8217;s (View -&gt; Developer -&gt;) Developer Tools<\/i>, the push for showing you coming, for us, from a feeling of indispensibility it has given us recently, chasing down some &#8220;old chestnut&#8221; issues we finally feel compelled to chase down.  How can such slothfulness happen?  Well, some errors do not stop webpages displaying, and these are of that ilk, but it really is good practice to try to chase down issues that these &#8220;web inspectors&#8221; present you both for the issue itself, and to appreciate how things change over time with the web browser rendering rules and to get to understand your HTML\/Javascript\/CSS better.<\/p>\n<p>We have two separate issues presented, in this context, today &#8230;<\/p>\n<ol>\n<li><font color=red>&#8220;Failed to load resource: the server responded with a status of 404 (Not Found)     openquote1.gif:1&#8221;<\/font>\n<ul>\n<li>a fairly self explanatory symptom to a problem leading us to &#8230;<\/li>\n<li>(good ol&#8217;) TwentyTen theme&#8217;s header.php CSS as per &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\nblockquote {<br \/>\n  display: block;<br \/>\n  padding: 18px;<br \/>\n  border-top: 1px solid #e1cc89;<br \/>\n  border-bottom: 1px solid #e1cc89;<br \/>\n  margin: 5px;<br \/>\n  text-indent: 4px;<br \/>\n  background: url('closequote1.gif') bottom right no-repeat,url('openquote1.gif') top left no-repeat;<br \/>\n  background-color: #faebbc;<br \/>\n}<br \/>\n<br \/>\nblockquote p {<br \/>\n  display: block;<br \/>\n  padding: 18px;<br \/>\n  margin: 5px;<br \/>\n  text-indent: 4px;<br \/>\n  background: url('closequote1.gif') bottom right no-repeat,url('openquote1.gif') top left no-repeat;<br \/>\n  background-color: #faebbc;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; begging the question <a target=_blank title='Google search ... where is the folder of a wordpress theme image resources' href='https:\/\/www.google.com\/search?q=where+is+the+folder+of+a+wordpress+theme+image+resources&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=where+is+the+folder+of+a+wordpress+theme+image+resources&#038;aqs=chrome..69i57j33.17966j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>&#8220;Where is WordPress TwentyTen theme&#8217;s default place for image resources?&#8221;<\/a> (other than uploaded ones, we venture) &#8230; which felt inconclusive to us, so we went with the &#8220;supply an absolute URL reference solution&#8221; instead, <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\nblockquote {<br \/>\n  display: block;<br \/>\n  padding: 18px;<br \/>\n  border-top: 1px solid #e1cc89;<br \/>\n  border-bottom: 1px solid #e1cc89;<br \/>\n  margin: 5px;<br \/>\n  text-indent: 4px;<br \/>\n  background: url('<font color=blue>\/\/www.rjmprogramming.com.au\/ITblog\/<\/font>closequote1.gif') bottom right no-repeat,url('<font color=blue>\/\/www.rjmprogramming.com.au\/ITblog\/<\/font>openquote1.gif') top left no-repeat;<br \/>\n  background-color: #faebbc;<br \/>\n}<br \/>\n<br \/>\nblockquote p {<br \/>\n  display: block;<br \/>\n  padding: 18px;<br \/>\n  margin: 5px;<br \/>\n  text-indent: 4px;<br \/>\n  background: url('<font color=blue>\/\/www.rjmprogramming.com.au\/ITblog\/<\/font>closequote1.gif') bottom right no-repeat,url('<font color=blue>\/\/www.rjmprogramming.com.au\/ITblog\/<\/font>openquote1.gif') top left no-repeat;<br \/>\n  background-color: #faebbc;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n &#8230; a solution that now causes that quote imagery you see below &#8230;<\/p>\n<blockquote><p>\nFour score and twenty years ago &#8230;\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<\/li>\n<li><font color=red>&#8220;Uncaught TypeError: Cannot read property &#8216;innerHTML&#8217; of null     markit.html:87<br \/>\n             at plookforhighlight (markit.html:87)<br \/>\n             at markit.html:90&#8221;<\/font><\/p>\n<ul>\n<li>getting us to two finger gesture -&gt; View Page Source to find instances of the mention of &#8220;markit.html&#8221; &#8230; making us realize that the &#8230;<\/li>\n<li><code><br \/>\n&lt;iframe src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\" style=\"width:100%;height:450px;\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code><br \/>\n &#8230; meant that the issue would be to do with markit.html line 87 <font size=1>(you might say &#8230; doh!)<\/font> &#8230; so &#8230;\n<\/li>\n<li>reaching markit.html&#8217;s <font color=blue>line 87<\/font> &#8230;<br \/>\n<code><br \/>\n  if (xsel != phight && xsel != '') {<br \/>\n    phight=xsel;<br \/>\n    \/\/alert(phight + ' ... ' + document.getElementById('phfloater').innerHTML);<br \/>\n    var lines=phight.split('&lt;br&gt;');<br \/>\n    for (var ilines=0; ilines&lt;lines.length; ilines++) {<br \/>\n    if (eval(1 + ilines) == lines.length && document.getElementById('phfloater')) {<br \/>\n    document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '', '&lt;mark' + aglow + '&gt;' + lines[ilines] + '&lt;\/mark&gt;');<br \/>\n    } else {<br \/>\n    document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '&lt;br&gt;', '&lt;mark' + aglow + '&gt;' + lines[ilines] + '&lt;\/mark&gt;&lt;br&gt;');<br \/>\n    }<br \/>\n    }<br \/>\n  } else if (xsel == '') {<br \/>\n    phight='';<br \/>\n  }<br \/>\n  <font color=blue>document.getElementById('showhtml').innerHTML=document.getElementById('phfloater').innerHTML.replace(\/\\&gt;\/g,'&gt;').replace(\/\\&lt;\/g,'&lt;').replace(\/\\&lt\\;br\\&gt\\;\/g, '&lt;br&gt;&lt;br&gt;');<\/font><br \/>\n<\/code><br \/>\n &#8230; may be an error caused by an unexpected dual purpose asked of &#8220;markit.html&#8221; that nobody told &#8220;markit.html&#8221; about <font size=1>(tsk, tsk)<\/font> &#8230; that we may as well fix by a &#8220;cautionary if clause approach&#8221; <font color=purple>as per<\/font> &#8230;<br \/>\n<code><br \/>\n  if (xsel != phight && xsel != '') {<br \/>\n    phight=xsel;<br \/>\n    \/\/alert(phight + ' ... ' + document.getElementById('phfloater').innerHTML);<br \/>\n    var lines=phight.split('&lt;br&gt;');<br \/>\n    for (var ilines=0; ilines&lt;lines.length; ilines++) {<br \/>\n    if (eval(1 + ilines) == lines.length && document.getElementById('phfloater')) {<br \/>\n    document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '', '&lt;mark' + aglow + '&gt;' + lines[ilines] + '&lt;\/mark&gt;');<br \/>\n    } else<font color=purple> if (document.getElementById('phfloater'))<\/font> {<br \/>\n    document.getElementById('phfloater').innerHTML=document.getElementById('phfloater').innerHTML.replace(lines[ilines] + '&lt;br&gt;', '&lt;mark' + aglow + '&gt;' + lines[ilines] + '&lt;\/mark&gt;&lt;br&gt;');<br \/>\n    }<br \/>\n    }<br \/>\n  } else if (xsel == '') {<br \/>\n    phight='';<br \/>\n  }<br \/>\n  <font color=purple>if (document.getElementById('showhtml') && document.getElementById('phfloater')) {<\/font><br \/>\n  <font color=blue>document.getElementById('showhtml').innerHTML=document.getElementById('phfloater').innerHTML.replace(\/\\&gt;\/g,'&gt;').replace(\/\\&lt;\/g,'&lt;').replace(\/\\&lt\\;br\\&gt\\;\/g, '&lt;br&gt;&lt;br&gt;');<\/font><br \/>\n  <font color=purple>}<\/font><br \/>\n<\/code>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Wonderful stuff indeed, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/webinspectorhelp.gif\" title=\"Click picture\">regarding the precision it supplies for problem diagnosis!<\/a><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d48618' onclick='var dv=document.getElementById(\"d48618\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48618' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>To our mind, all the Web Browser (what we like to term) &#8220;Web Inspectors&#8221; on this MacBook Pro for &#8230; Safari&#8216;s (Develop -&gt; Show) Web Inspector Firefox&#8216;s (Tools -&gt; Web Developer -&gt;) Inspector Opera&#8216;s (Developer -&gt;) Developer Tools Google Chrome&#8216;s &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chrome-developer-tools-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[218,281,305,3280,1929,520,576,3281,652,3061,990,997,1319,1404],"class_list":["post-48618","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-code","tag-css","tag-debug","tag-developer-tools","tag-error","tag-google-chrome","tag-html","tag-issue","tag-javascript","tag-line-number","tag-problem","tag-programming","tag-tutorial","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48618"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=48618"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48618\/revisions"}],"predecessor-version":[{"id":48726,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48618\/revisions\/48726"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}