Wednesday, 18 July 2018

GOOGLE CONSOLE


-----------------------------------------------------------------------------------------------------------
GOOGLE CONSOLE CODE
READ MORE
https://www.javascripture.com/Image
https://github.com/adriancooney
-----------------------------------------------------------------------------------------------------------
<html>
<!-- https://www.javascripture.com/HTMLImageElement -->
<head></head>
<body>
<img id="sunset" src="https://www.w3schools.com/tags/smiley.gif" alt="BVI Sunset">
<script>
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
--------------------------------------------------------------------------------------------------------------
ActionMacWindows / Linux
Accept autocomplete suggestionRight Arrow or TabRight Arrowor Tab
Reject autocomplete suggestionEscapeEscape
Get previous statementUp ArrowUp Arrow
Get next statementDown ArrowDown Arrow
Focus the ConsoleControl+`Control+`
Clear the ConsoleCommand+K or Option+LControl+L
Force a multi-line entry. Note that DevTools should detect multi-line scenarios by default, so this shortcut is now usually unnecessaryCommand+ReturnShift+Enter
ExecuteReturnEnter
Expand all sub-properties of an object that's been logged to the ConsoleHold 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
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);
-----------------------------------------------------------------------------------------------------------------
OTHER CONSOLE BACKGROUND TUTORIAL

As we work the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console.

For the start:

  1. Select the first <li> in the Elements tab.
  2. Press Esc – it will open console right below the Elements tab.

Now the last selected element is available as $0, the previously selected is $1 etc.

We can run commands on them. For instance, $0.style.background = 'red' makes the selected list item red, like this:

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




Posted by on Wednesday, 18 July 2018 at 00:28
Labels: , , , , , , , , , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets