figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px !important; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
#write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
.typora-export * { -webkit-print-color-adjust: exact; }
html.blink-to-pdf { font-size: 13px; }
.typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
.typora-export #write::after { height: 0px; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
.md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
.md-toc-h4 .md-toc-inner { margin-left: 5em; }
.md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
.md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }

:root { --control-text-color: #777; }
h1, .h1, .f1 { font-size: 2rem; line-height: 2.5rem; }
h2, .h2, .f2 { font-size: 1.5rem; line-height: 2rem; }
h3, .h3, .f3 { font-size: 1.25rem; line-height: 1.5rem; }
p, .p, .f4, h4, h5, h6, dl, ol, ul, pre[cid], div[cid], #typora-source { font-size: 1.125rem; line-height: 1.5rem; }
h4 { font-size: 1.13rem; }
body { font-family: Merriweather, "PT Serif", Georgia, "Times New Roman", STSong, serif; line-height: 1.5rem; font-weight: 400; }
#write { max-width: 914px; color: rgb(51, 51, 51); }
img { width: auto; max-width: 100%; }
body { font-size: 1.5rem; box-sizing: border-box; }
.ty-table-edit { background: rgb(237, 237, 237); }
table { width: 100%; font-size: 1.125rem; }
table > thead > tr > th, table > thead > tr > td, table > tbody > tr > th, table > tbody > tr > td, table > tfoot > tr > th, table > tfoot > tr > td { padding: 12px; line-height: 1.2; vertical-align: top; border-top: 1px solid rgb(51, 51, 51); }
table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid rgb(51, 51, 51); }
table > caption + thead > tr:first-child > th, table > caption + thead > tr:first-child > td, table > colgroup + thead > tr:first-child > th, table > colgroup + thead > tr:first-child > td, table > thead:first-child > tr:first-child > th, table > thead:first-child > tr:first-child > td { border-top: 0px; }
table > tbody + tbody { border-top: 2px solid rgb(51, 51, 51); }
p { font-weight: 300; line-height: 1.5; }
abbr { border-bottom: 1px dotted black; cursor: help; }
pre, code { font-family: Menlo, Monaco, "Courier New", monospace; }
code, .md-fences { color: rgb(122, 122, 122); }
.md-fences { padding: 0.5rem 1.125em; margin-bottom: 0.88em; font-size: 1rem; border: 1px solid rgb(122, 122, 122); }
blockquote { padding: 1.33em; font-style: italic; border-left: 5px solid rgb(122, 122, 122); color: rgb(85, 85, 85); }
blockquote em { color: rgb(0, 0, 0); }
blockquote footer { font-size: 0.85rem; font-style: normal; background-color: rgb(255, 255, 255); color: rgb(122, 122, 122); border-color: transparent; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: Lato, "Helvetica Neue", Helvetica, sans-serif; font-weight: bold; line-height: 1.2; margin: 1em 0px 0.5em; }
@media screen and (min-width: 48em) {
.h1, h1 { font-size: 3.25rem; }
.h2, h2 { font-size: 2.298rem; }
.h3, h3 { font-size: 1.625rem; }
.h4, h4 { font-size: 1.3rem; }
#write > h4.md-focus::before, #write > h5.md-focus::before, #write > h6.md-focus::before { top: 1px; }
.p, p, li { font-size: 1.25rem; line-height: 1.8; }
table { font-size: 1.25rem; }
}
@media (max-width: 48em) {
blockquote { margin-left: 1rem; margin-right: 0px; padding: 0.5em; }
.h1, h1 { font-size: 2.827rem; }
.h2, h2 { font-size: 1.999rem; }
.h3, h3 { font-size: 1.413rem; }
.h4, h4 { font-size: 1.3rem; }
}
@media screen and (min-width: 64em) {
.h1, h1 { font-size: 4.498rem; }
.h2, h2 { font-size: 2.29rem; }
.h3, h3 { font-size: 1.9rem; }
.h4, h4 { font-size: 1.591rem; }
#write > h4.md-focus::before { top: 4px; }
}
a { color: rgb(70, 63, 92); text-decoration: underline; }
#write { padding-top: 2rem; }
#write pre.md-meta-block { min-height: 35px; padding: 2000px 1em 10px 0px; white-space: pre; border-width: 0px 30px; border-top-style: initial; border-bottom-style: initial; border-top-color: initial; border-bottom-color: initial; border-image: initial; border-left-style: solid; border-left-color: rgb(248, 248, 248); border-right-style: solid; border-right-color: rgb(248, 248, 248); width: 100vw; max-width: calc(100% + 60px); margin-left: -30px; margin-bottom: 2em; margin-top: -2010px; line-height: 1.5em; color: rgb(122, 122, 122); background-color: rgb(250, 250, 250); font-family: Lato, "Helvetica Neue", Helvetica, sans-serif; font-weight: 300; clear: both; font-size: 1.125rem; }
.md-image > .md-meta { color: rgb(70, 63, 92); }
.footnotes { font-size: 1.1rem; }
.md-tag { font-family: Lato, "Helvetica Neue", Helvetica, sans-serif; }
.code-tooltip { background: white; }
.code-tooltip-content { font-size: 1.1rem; }
.task-list { padding-left: 0px; }
.md-task-list-item { padding-left: 34px; }
.md-task-list-item > input { width: 1.25rem; height: 1.25rem; display: block; -webkit-appearance: initial; top: -0.2rem; margin-left: -1.6em; margin-top: calc(1rem - 7px); border: none; }
.md-task-list-item > input:focus { outline: none; box-shadow: none; }
.md-task-list-item > input::before { border: 1px solid rgb(85, 85, 85); border-radius: 1.5rem; width: 1.5rem; height: 1.5rem; background: rgb(255, 255, 255); content: " "; transition: background-color 200ms ease-in-out 0s; display: block; }
.md-task-list-item > input:checked::before, .md-task-list-item > input[checked]::before { background: rgb(51, 51, 51); border-width: 2px; display: inline-block; transition: background-color 200ms ease-in-out 0s; }
.md-task-list-item > input:checked::after, .md-task-list-item > input[checked]::after { opacity: 1; }
.md-task-list-item > input::after { transition: opacity 0.05s ease-in-out 0s; transform: rotate(-45deg); position: absolute; top: 0.4375rem; left: 0.28125rem; width: 0.9375rem; height: 0.5rem; border-width: 0px 0px 3px 3px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; content: " "; opacity: 0; }
.md-tag { color: inherit; }
.md-toc:focus .md-toc-content { margin-top: 19px; }
#typora-sidebar { font-size: 1rem !important; }
.html-for-mac #typora-sidebar { background-color: white; }
.outline-content li, .outline-content ul { font-size: 1rem !important; }
.outline-title { line-height: inherit; margin-top: 10px; }
.outline-expander { width: 18px; }
.outline-expander::before { content: "+"; font-family: inherit; color: rgb(108, 108, 108); font-size: 1.5rem; top: 0.1rem; }
.outline-expander:hover::before { content: "+"; }
.outline-item-open > .outline-item > .outline-expander::before { content: "-"; }
#typora-source { font-family: Courier, monospace; color: rgb(106, 106, 106); }
.os-windows #typora-source { font-family: inherit; }
.cm-s-typora-default .cm-header, .cm-s-typora-default .cm-property, .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { color: rgb(66, 139, 202); }
.cm-s-typora-default .cm-atom, .cm-s-typora-default .cm-number { color: rgb(119, 119, 119); }
.md-diagram-panel { margin-top: 24px; margin-left: -1.2em; }
.md-mathjax-midline { background: rgb(250, 250, 250); }
.enable-diagrams pre.md-fences[lang="sequence"] .code-tooltip, .enable-diagrams pre.md-fences[lang="flow"] .code-tooltip, .enable-diagrams pre.md-fences[lang="mermaid"] .code-tooltip { bottom: -3.4em; }
.dropdown-menu .divider { border-color: rgb(229, 229, 229); }
-->

  • 呼出快捷指令面板：cmd + shift + p

    在Devtools界面下，键入cmd + shift + p`将其激活，然后开始在栏中键入要查找的命令或输入？号以查看所有可用命令 .如下图:其中Open file,Go to line,Go to symbol对于快速打开文件和定位文件位置还是节省了不少时间.

1.性能监视器：> performance monitor

  • 本地覆盖：local overrides

    感觉这个特性是超级棒。 使用我们自己的本地资源覆盖网页所使用的资源。 多说无益，直接举个例子大家就明白了。大家看到了吧，我们可以把网络资源直接和本地资源映射，再次刷新网页，取得资源文件就是本地的了。这种对js、css等文件批量修改调试特别有用。

    local overrides还可以模拟Mock数据，如果后端API还不OK或者不想频繁的发布后台API。这个功能是相           当有用，不过听说还不支持XHR请求。

  • 控制台内置指令

    私以为如果网页里面如果没有引用jquery是不是就不能使用$这样的语法了,nonono

    $(selector, [startNode])：单选择器

    可以选择元素并触发元素事件.

$$（选择器，[startNode]）：全选择器

$x(path, [startNode])：xpath选择器

    $x(path)返回与给定xpath表达式匹配的DOM元素数组 .

$x('//div'):返回页面上的所有div元素。

  • getEventListeners（object）:获取指定对象的绑定事件

  • Console...的多种用法

1.变量打印：%s、%o、%d、和%c

例如： const text = "文本1"

console.log(打印${text})

//结果为打印文本1

2.布尔断言打印：console.assert()

做前端调试时很有用。

3.console.table()内容可以以表格的形式输出.

Chrome Dev tools的几点小技巧的更多相关文章

  1. chrome dev tools

    chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...

  2. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据 ...

  3. Chrome Dev Tools ：成为更高效的开发人员

    原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...

  4. 15个你不得不知道的Chrome dev tools的小技巧

    转载自:https://www.imooc.com/article/2559 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chro ...

  5. Chrome 35个开发者工具的小技巧

    来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...

  6. [Debug] Debug Node.js Application by using Chrome Dev tools

    For example you have a server.js file, and you want to debug some problems; What you can do is: node ...

  7. [Debug] How to Debug a NestJs Backend using the Chrome Dev Tools

    TO debug NestJS code with Chrome dev tool, we can run: node --inspect-brk dist/rest-api/src/main.js ...

  8. 保存chrome书签中链接顺序的小技巧

    长期以来,我的chrome浏览器书签总是不能自主排序,用书签管理器排序之后,不关闭chrome是好的,一旦关闭重开,又会恢复成原先的排序,实在很诧异,手动修改Bookmars文件也不行. 我们知道,如 ...

  9. 页面性能分析-Chrome Dev Tools

    一.分析面板介绍 进行页面性能快速分析的主要是图中圈出来的几个模块功能: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...) ...

随机推荐

  1. /cygdrive/c/MinGW/bin/autoconf-2.68: line 501: /mingw/bin/autom4te-2.68: No such file or directory

    出现如下错误 编译openssh的时候 # autoconf /cygdrive/c/MinGW/bin/autoconf-2.68: line 501: /mingw/bin/autom4te-2. ...

  2. 从0系统学 Android--1.1认识 Android

    一转眼工作也有几年的时间了,一直想沉下心来,再回过头来重新系统的学习一遍 Android.所以就有了这个读书笔记.俗话说温故而知新,下面就请大家再跟着我系统的学习一篇 Android 吧! 这一系列主 ...

  3. Zeppelie连接jdbc的使用

    1. 下载 wget http://apache.mirror.cdnetworks.com/zeppelin/zeppelin-0.8.1/zeppelin-0.8.1-bin-all.tgz 2. ...

  4. BayaiM__Linux安装MySQL的两种方法

    BayaiM__Linux安装MySQL的两种方法     < 以下内容,纯属抄袭,如有雷同,爱咋咋地 >  阅读(21210) | 评论(4340) | 转发(5660) | 删除 编辑 ...

  5. 微信小程序之 catalog 切换

    组件名称:catalog 组件属性:catalogData,type:String 组件描述:这是一个子组件,数据从父组件中传递 效果图: catalog 目录为多个,使用 scroll-view 容 ...

  6. （转）idea创建Maven项目时Maven插件内看不到mybatis-generator

    转载地址:https://blog.csdn.net/yytwiligt/article/details/81010360 创建Maven项目时插件配置添加了mybatis-generator但是右侧 ...

  7. Linux中自旋锁

    传统的spinlock Linux的的内核最常见的锁是自旋锁.自旋锁最多只能被一个可执行线程持有.如果一个执行线程试图获得一个被已经持有(争用)的自旋锁,那么该线程就会一直进行忙循环-旋转-等待锁重新 ...

  8. Alpha冲刺（1/4）

    队名:天码行空 组长博客连接 作业博客连接 团队燃尽图(共享): GitHub当日代码/文档签入记录展示(共享): 组员情况: 组员1:卢欢(组长) 过去两天完成了哪些任务:SVN管理工具搭建 展示G ...

  9. 算法六Z自形变换

    将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L    C     ...

  10. 如果对象的引用被置为null，；垃圾回收器是否会立即释放对象占用的内存？

    不会,在下一个垃圾回调周期中,这个对象将是被可回收的. 也就是说并不会立即被垃圾收集器立刻回收,而是在下一次垃圾回收时才会释放其占用的内存.