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
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 Arrowor 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 TABAFTER 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:
- Select the first
<li>in the Elements tab. - 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:
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment