GOOGLE CONSOLE

Wednesday, 18 July 2018

GOOGLE CONSOLE

-----------------------------------------------------------------------------------------------------------
GOOGLE CONSOLE CODE
READ MORE
https://www.javascripture.com/Image
https://github.com/adriancooney
-----------------------------------------------------------------------------------------------------------

<html>

<body>

var img = document.getElementById('sunset');

console.log(img.src); //TYPE THIS LINE IN CONSOLE AND PRESS ENTER FOR SHOW IMAGE SRC

</script>

</body>

</html>

-----------------------------------------------------------------------------------------------------------

IMAGES TAG TRACE FROM WEB PAGE WITH CONSOLE LOG
http://forums.mozillazine.org/viewtopic.php?p=2409328

----------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------

var img = document.getElementsByTagName("IMG");

console.log(img);

OR USE THIS CODE:

document.getElementsByTagName("IMG");

-----------------------------------------------------------------------------------------------------------
FOR CONSOLE LOG NOT WORKING
1) GO INSIDE SETTING PRESS RESTORE DEFAULTS AND RELOAD BUTTON
console.log("hello");
-----------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------
SHOW IMAGE IN CONSOLE
-----------------------------------------------------------------------------------------------------------

function getBox(width, height) {

return {

string: "+",

style: "font-size: 1px; padding: " + Math.floor(height/2) + "px " + Math.floor(width/2) + "px; line-height: " + height + "px;"

}

console.image = function(url, scale) {

scale = scale || 1;

var img = new Image();

img.onload = function() {

var dim = getBox(this.width * scale, this.height * scale);

console.log("%c" + dim.string, dim.style + "background: url(" + url + "); background-size: " + (this.width * scale) + "px " + (this.height * scale) + "px; color: transparent;");

};

img.src = url;

};

console.image("http://i.imgur.com/oGiMR.gif");

-------------------------------------------------------------------------------------------------------------
Console panel keyboard shortcuts
Read More:
https://developers.google.com/web/tools/chrome-devtools/shortcuts
--------------------------------------------------------------------------------------------------------------

Action	Mac	Windows / Linux
Accept autocomplete suggestion	`Right Arrow` or `Tab`	`Right Arrow`or `Tab`
Reject autocomplete suggestion	`Escape`	`Escape`
Get previous statement	`Up Arrow`	`Up Arrow`
Get next statement	`Down Arrow`	`Down Arrow`
Focus the Console	`Control`+`	`Control`+`
Clear the Console	`Command`+`K` or `Option`+`L`	`Control`+`L`
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessary	`Command`+`Return`	`Shift`+`Enter`
Execute	`Return`	`Enter`
Expand all sub-properties of an object that's been logged to the Console	Hold `Alt` then click Expand	Hold `Alt` then click Expand

------------------------------------------------------------------------------------------------------------------

HIDDEN DIV WITH GOOGLE CONSOLE
-----------------------------------------------------------------------------------------------------------------

<div id="myDIV" style=" 
width: 500px;
height: 500px;
background-color: lightblue;
">
<p>COPY AND PASTE BELOW CODE IN GOOGLE CONSOLE PANNEL</p>
<p>var x = document.getElementById('myDIV');</p>
<p>x.style.visibility = 'hidden';</p>
</div>
<!-- ADD THIS CODE IN GOOGLE CONSOLE FOR HIDDEN DIV
var x = document.getElementById('myDIV');
x.style.visibility = 'hidden';
-->

------------------------------------------------------------------------------------------------------------------
 GOOGLE CONSOLE HELLO CREATE SNIPPETS BY SOURCE TAB
https://developers.google.com/web/tools/chrome-devtools/javascript/snippets
https://developers.google.com/web/tools/chrome-devtools/media-panel
AFTER CREATE SNIPPET AD JAVASCRIPT CODE
-----------------------------------------------------------------------------------------------------------------
console.log('Hello, Snippets!');
document.body.innerHTML = '';
var p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);