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. SAP MM MB5L 报表里的差异金额如何调整？

    SAP MM MB5L 报表里的差异金额如何调整? 5月3号,收到财务顾问提出的一个问题,说是MB5L报表里有差异. 如下查询条件, 报表结果里显示有差异, 经查,导致这个差异的原因之一是,一些物料批 ...

  2. TCP/IP：完全弄清OSI七层模型

    OSI七层背景概述 诞生于1983年,iso(国际标准委员会)设计并推出. 目的:实现网络行业的兼容性 OSI七层模型与TCP/IP相对应的层次: 一般来说,我们把上三层被称为应用层,下四层被称为数据 ...

  3. CocoPods原理

    CocoaPods 的原理是将所有的依赖库都放到另一个名为Pods的项目中, 然而让住项目依赖Pods项目, 这样,源码管理工作任务从主项目移到了Pods项目中. 1.Pods项目最终会编译成一个名为 ...

  4. 从server.xml看Tomcat容器的层次结构

    先来看一下server.xml的结构: <Server> ​ <Listener/> ​ <GlobalNamingResources> ​ <Resourc ...

  5. Hadoop序列化案例实操

    需求 统计每一个手机号耗费的总上行流量.下行流量.总流量. 输入数据: 1 13736230513 192.196.100.1 www.atguigu.com 2481 24681 200 2 138 ...

  6. Bn Bp Binder native层关系

    Servicemanager 源码在/frameworks/base/cmds/servicemanager/service_manager.c 编译成 systemmanager 可执行文件 sys ...

  7. 01-day-vuex的使用

    知识点1===>简单的使用vuex 进行state取值 使用yarn下载 yarn add vuex -D vuex的包叫做 store 跟pages同级 创建store文件夹,文件夹下有sto ...

  8. GitHub密钥生成

    前提电脑上需装有Git软件 这里提供百度云下载地址:https://pan.baidu.com/s/1r0y4XRyQCz7ZJBnZJhAtqw 提取码:88qf  1.登录GitHub账号 2.点 ...

  9. Maven更改本地默认仓库时遇到的问题。 No implementation for org.apache.maven.model.path.PathTranslator was bound

    按照提示去查看log日志 2019-10-22 16:52:08,646 [ 161168]  ERROR -      #org.jetbrains.idea.maven - com.google. ...

  10. 日志分析利器Splunk的搭建、使用、破解

    博主对splunk的了解不多,博主的使用目的是为了同步,分析日志.当初的搭建也是为了公司申请牌照需要日志服务器分析日志,顺便自己也对这方面感兴趣就买了本书看了看搭建玩的,后来检查来了博主也给他们演示了 ...