1. The browser runs the HTML code
data:text/html,<meta charset="UTF-8"><div id="test">I display in browser</div>
It's amazing, right, but the premise is that only non-IE browsers can play like this.
2. Browser as editor
data:text/html,<html cententeditable>
After all, thanks to the new contenteditable attribute in HTML5, when the element specifies this attribute, the content of the element becomes editable.
By extension, after the following code is executed in the console, the entire page will become editable, feel free to trample it~
document.body.contentEditable='true';
3. Use the a tag to automatically parse the URL
var a = document .createElement ('a' );
a. href = 'http://www.cnblogs.com/wayou/p/';
console. log( a. host);
4. Elements with IDs on the page will create global variables
< div id ="sample" ></div > <script type= "text/javascript"> console. log( sample); </script>
5. When loading CDN files, the HTTP logo can be omitted
The popular CDN now loads some common JS and CSS files from a dedicated server. For security reasons, some CDN servers use HTTPS to connect, while others use traditional HTTP. In fact, we can ignore this and use it omitted from the URL.
<script src="//domain.com/path/to/script.js"></script>
6. console.log() can change color
Use %c to let you find the point from a bunch of debugging information!
7、console.table
Outputting the object as a table is still a little useless.
8. Time-consuming console.time() and console.timeEnd() tests
Want to know how long a certain piece of code took? Use this to help you do it.
9. You may not even notice this little button in chrome
Beautify the compressed code in one step!
10. The headache of vertical centering translateY to help
/* Center vertically */
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* center horizontally */
.horizontal-center {
position: relative;
left: 50%;
transform: translateX(-50%);
}
Author: Nuggets 5025
Link: https://juejin.im/post/5ad1bce46fb9a028cc61a8c0
Source: Nuggets
Copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.
11. Want to know how many times your code is executed?
