Console object
js also has the definition that everything is an object, so the commonly used one console is also an object, naturally it is an object, so it will have some methods and attributes on it. After you open the console with F12, directly enter console and press Enter, you can see the details, as shown below:
This article records the commonly used console APIs. The details come from the official documentation: Chrome DevTools Chinese Manual: https://leeon.gitbooks.io/devtools/content/learn_basic/overview.html There are many other details of the use of Google's development tools , when you are free, you can go shopping more, it will be of great benefit ^_^
Console console api
1. console.assert()方法 , generally not used much, it is equivalent to a conditional judgment. For example, there is the following code:
let isLogin = true
console.assert(isLogin, 'isLogin为false，当前处于未登录状态')
// 此时isLogin为true不会执行打印，如果为false的时候，就会打印提示：isLogin为false，当前处于未登录状态
// 相当于：
if(!isLogin){console.log('isLogin为false，当前处于未登录状态')} //图示如下：
2. console.clear()方法 , you can also clear the console, clear the console, and output Console was cleared , as shown below:
3. console.count()方法 , this method is a bit tasteless, it is used for counting, if counting, we can also use console.log to count. Just look at the code
let arr = ['甲', '乙', '丙', '丁']
for (let i = 0; i < arr.length; i++) {
console.count('console.count计数')
console.log('console.log计数', i + 1)
} // 结果如下图：
4. console.debug()方法 , and console.log() are basically the same, and they are used less, so I won't go into details.
5. console.dir()方法 , which is generally used to print dom objects and find their attributes, which is quite common. The diagram is as follows:
6. console.dirxml()方法 , the method for printing XML/HTML document structure, very good. An example is as follows:
<body>
<h1>
<span>
<h2>你好console.dirxml()</h2>
</span>
</h1>
<script>
let span = document.querySelector('h1')
console.dirxml(span)
</script>
</body>
// 打印图如下：
7. console.error() and console.exception()方法 are used to throw errors to the console. The framework (vue/react) error messages we encountered during the encoding process are all thrown by this method from. Or our own encapsulated function method. If the user does not use it in the correct way, we can also use this method to make an error message on the console, which is helpful for better development.
8. console.warn()方法 , the same as above, but this is a throwing warning, not as serious as the above throwing error. After all, for programmers, you don't need to worry about warnings, and you only watch if you report errors, haha
console.info() throws a message 9. console.log() , universal dog skin plaster, the most commonly used method, will not go into details. After all, there is no solution, console Dafa!
10. console.table()方法 is used to print a table on the console. For example, we display the information such as the version number and time of the project update in the form of a table on the console. The code and sample diagram are as follows:
let arr = [
// 每个对象的key是表格每一列表头的数据，value是每一行的数据
{
edition: 'v1.0',
author: '孙悟空',
time: '2020-06-06',
},
{
edition: 'v2.0',
author: '猪八戒',
time: '2021-07-07',
},
{
edition: 'v3.0',
author: '沙和尚',
time: '2022-08-08',
},
]
console.table(arr)
Click on the header to sort it
11. cosole.time和console.timeEnd方法 Used for timing, see how long your program has been used, generally used for performance optimization, time monitoring and the like. For example, you can calculate how long a loop takes to execute, for example, you can calculate how long a recursion takes to execute and so on. cosole.time equivalent to starting the stopwatch, console.timeEnd equivalent to ending the stopwatch. The code diagram is as follows:
console.time() // 开始掐表表
for (let i = 0; i < 100; i++) { }
console.timeEnd() // 结束掐秒表
console.timeLog is equivalent to recording the middle time log, which is not used very much 12. console.trace()与console.log() basically the same , not repeat
special console print
- %s string format (less used)
- %i or %d integer format (less used)
- %f floating point format (less used)
- %o DOM node (less used) because:
console.log('%o',document.body) == console.dirxml(document.body) - %O JavaScript object (less used) because:
console.log('%O',document.body) == console.dir(document.body) -
%c 对输出的字符串使用css样式，样式通过第二个参数指定。有几个%c 就要有几个对应的第二个参数。第二个参数，使用逗号分隔开（用的多、用的多、用的多）example:
// 这里分别给孙悟空、猪八戒、沙和尚指定不同的样式
let content = "%c 孙悟空 %c 猪八戒 %c 沙和尚"
let styleSunWuKong = "color: white; background: black; padding:5px;"
let styleZhuBaJie = "color: green; background: pink; padding:5px;"
let styleShaHeShang = "color: yellow; background: purple; padding:5px;"
console.log(content, styleSunWuKong, styleZhuBaJie, styleShaHeShang); // 效果图如下：
- Print the image (the way of the background image url), the code rendering is as follows:
console.log(`%c `, `background-image: url(http://ashuai.work/static/img/avantar.66bb7908.png);
padding: 120px 120px;
background-size: cover;
background-repeat: no-repeat;
`
)
Google developer tools common shortcut keys
-
F12Open the console (Console panel) -
Ctrl+Shift+IOpen the console (Console panel) -
Ctrl+Shift+JOpen the console (Console panel) -
Ctrl+Shift+COpen console (Elements panel) -
Ctrl+[andCtrl+]in different panels of the console -
Ctrl+FSearch the text content on the current page (in addition to searching in the code, you can also look up the corresponding text on the page) -
clear()Enter in the console to clear the console. Or useCtrl+Lto clear the console when the console has the focus -
shift+entercan be input in console
Debugging mouse hover popup style steps
For example, the content of the second-level bullet box appears when the mouse hovers over el-menu, but when the mouse moves away, the second-level bullet box disappears, which makes it inconvenient for us to review the element style. So, we can do this, as shown below:
Learn something new every day and record it ^_^
chrome
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。