diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/tools | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/tools')
-rw-r--r-- | files/zh-cn/tools/3d_view/index.html (renamed from files/zh-cn/tools/page_inspector/3d_view/index.html) | 0 | ||||
-rw-r--r-- | files/zh-cn/tools/add-ons/index.html | 6 | ||||
-rw-r--r-- | files/zh-cn/tools/deprecated_tools/index.html (renamed from files/zh-cn/tools/不推荐的工具/index.html) | 0 | ||||
-rw-r--r-- | files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html (renamed from files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html) | 0 | ||||
-rw-r--r-- | files/zh-cn/tools/profiler/index.html | 140 | ||||
-rw-r--r-- | files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html (renamed from files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html) | 0 | ||||
-rw-r--r-- | files/zh-cn/tools/responsive_design_mode/index.html (renamed from files/zh-cn/tools/responsive_design_view/index.html) | 0 | ||||
-rw-r--r-- | files/zh-cn/tools/storage_inspector/index.html (renamed from files/zh-cn/tools/存储查看器/index.html) | 0 | ||||
-rw-r--r-- | files/zh-cn/tools/tips/index.html (renamed from files/zh-cn/tools/小技巧/index.html) | 0 | ||||
-rw-r--r-- | files/zh-cn/tools/using_the_source_editor/index.html | 93 | ||||
-rw-r--r-- | files/zh-cn/tools/web_audio_editor/index.html (renamed from files/zh-cn/tools/web音频编辑器/index.html) | 0 |
11 files changed, 0 insertions, 239 deletions
diff --git a/files/zh-cn/tools/page_inspector/3d_view/index.html b/files/zh-cn/tools/3d_view/index.html index 60ea480269..60ea480269 100644 --- a/files/zh-cn/tools/page_inspector/3d_view/index.html +++ b/files/zh-cn/tools/3d_view/index.html diff --git a/files/zh-cn/tools/add-ons/index.html b/files/zh-cn/tools/add-ons/index.html deleted file mode 100644 index 7c50cee424..0000000000 --- a/files/zh-cn/tools/add-ons/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: 组件 -slug: Tools/Add-ons -translation_of: Tools/Add-ons ---- -<div>{{ToolsSidebar}}</div><p>开发者工具没有内置到Firefox里面,而是作为组件的方式存在。</p> diff --git a/files/zh-cn/tools/不推荐的工具/index.html b/files/zh-cn/tools/deprecated_tools/index.html index f7bb80e5bf..f7bb80e5bf 100644 --- a/files/zh-cn/tools/不推荐的工具/index.html +++ b/files/zh-cn/tools/deprecated_tools/index.html diff --git a/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html index a5a6ae1e6e..a5a6ae1e6e 100644 --- a/files/zh-cn/tools/page_inspector/how_to/view_fonts/index.html +++ b/files/zh-cn/tools/page_inspector/how_to/edit_fonts/index.html diff --git a/files/zh-cn/tools/profiler/index.html b/files/zh-cn/tools/profiler/index.html deleted file mode 100644 index e2f7da543c..0000000000 --- a/files/zh-cn/tools/profiler/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: JavaScript Profiler -slug: Tools/Profiler -translation_of: Tools/Performance -translation_of_original: Tools/Profiler ---- -<div>{{ToolsSidebar}}</div><p>使用Profiler工具找到你的JavaScript代码的瓶颈. Profiler会定期统计JavaScript样本的堆栈信息.</p> - -<p>你可以通过在Web Developer菜单下选择Profiler来启动它. 在Linux和OS X下,你可以在Tools菜单下找到Web Developer,而在windows下,Web Developer则在FIrefox菜单下.</p> - -<p>当Profiler被选择后,工具箱就会被打开.</p> - -<h2 id="抽样分析器"><a name="sampling-profilers">抽样分析器</a></h2> - -<p>JavaScript Profiler是一个抽样分析器. 这意味着它会定期对JavaScript引擎的状态取样, 并且记录取样时代码运行的堆栈信息. 统计学上, 我们运行可接受样本数量的函数,花费的时间相当于浏览器运行它的时间,所以你可以很好的从你的代码里找到瓶颈。<br> - <br> - <a name="profiling-example">例如,考虑这样一个程序:</a></p> - -<pre class="brush: js">function doSomething() { - var x = getTheValue(); - x = x + 1; // -> sample A - logTheValue(x); -} - -function getTheValue() { - return 5; -} - -function logTheValue(x) { - console.log(x); // -> sample B, sample C -} - -doSomething();</pre> - -<p>Suppose we run this program with the profiler active, and in the time it takes to run, the profiler takes three samples, as indicated in the inline comments above.</p> - -<p>They're all taken from inside <code>doSomething()</code>, but the second two are inside the <code>logTheValue()</code> function called by <code>doSomething()</code>. So the profile would consist of three stack traces, like this:</p> - -<pre>Sample A: doSomething() -Sample B: doSomething() > logTheValue() -Sample C: doSomething() > logTheValue()</pre> - -<p>This obviously isn't enough data to tell us anything, but with a lot more samples we might be able to conclude that <code>logTheValue()</code> is the bottleneck in our code.</p> - -<h2 id="Creating_a_profile">Creating a profile</h2> - -<p>点击探查器中的秒表按钮来开始记录。当探查器正在记录时,秒表按钮是高亮状态。当我们再一次点击秒表按钮时,记录将停止并保存为一个新的Profile:</p> - -<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> - -<p>Once you've clicked "Stop", the new profile will open automatically:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>This pane's divided into two parts:</p> - -<ul> - <li>The left-hand side lists all the profiles you've captured and allows you to load each one. Just above this there are two buttons: the <em>stopwatch</em> button allows you to record a new profile while the <em>Import...</em> button allows you to import previously saved data. When profile is selected, you can save its data as a JSON file by clicking the <em>Save</em> button.</li> - <li>The right-hand side displays the currently loaded profile.</li> -</ul> - -<h2 id="Analyzing_a_profile">Analyzing a profile</h2> - -<p>The profile is split into two parts:</p> - -<ul> - <li>the <a href="#profile-timeline" title="#profile-timeline">profile timeline</a></li> - <li>the <a href="#profile-details" title="#profile-details">profile details</a></li> -</ul> - -<h3 id="Profile_timeline"><a name="profile-timeline">Profile timeline</a></h3> - -<p>The profile timeline occupies the top part of the profile display:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.</p> - -<p>Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> and <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p> - -<p>You can examine a specific range within the profile by clicking and dragging inside the timeline:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:</p> - -<p><br> - <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Profile_details"><a name="profile-details">Profile details</a></h3> - -<p>The profile details occupy the bottom part of the profile display:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> - -<p><strong>Running time</strong> shows the total number of samples in which this function appeared<a href="#footnote-1"><sup>1</sup></a>, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the <code>detectImage()</code> function.</p> - -<p><strong>Self</strong> shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, <code>doSomething()</code> would have a <strong>Running time</strong> of 3 (samples A, B, and C), but a <strong>Self</strong> value of 1 (sample A).</p> - -<p>The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.</p> - -<h3 id="Expanding_the_call_tree">Expanding the call tree</h3> - -<p>In a given row, if there are any samples taken while we were in a function called by this function (that is, if <strong>Running Time</strong> is greater than <strong>Self</strong> for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.</p> - -<p>In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, the fully-expanded call tree would look like this:</p> - -<table class="standard-table" style="height: 100px; width: 378px;"> - <tbody> - <tr> - <td style="text-align: center;"><strong>Running Time</strong></td> - <td style="text-align: center;"><strong>Self</strong></td> - <td style="text-align: center;"> </td> - </tr> - <tr> - <td style="text-align: center;">3 100%</td> - <td style="text-align: center;">1</td> - <td style="text-align: center;">doSomething()</td> - </tr> - <tr> - <td style="text-align: center;">2 67%</td> - <td style="text-align: center;">2</td> - <td style="text-align: center;">logTheValue()</td> - </tr> - </tbody> -</table> - -<p>To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the <code>detectImage()</code> function. But all of them were taken in functions called by <code>detectImage()</code> (the <strong>Self</strong> cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>This tells us that 6 samples were taken when we were actually executing <code>detectAtScale(), </code>12 when we were executing <code>getRect()</code> and so on.</p> - -<h2 id="Footnotes">Footnotes</h2> - -<ol> - <li><a name="footnote-1">If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like <code>forEach</code> will appear multiple times in the call tree.</a></li> -</ol> - -<p> </p> diff --git a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html index 13f27d0a4a..13f27d0a4a 100644 --- a/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html +++ b/files/zh-cn/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html diff --git a/files/zh-cn/tools/responsive_design_view/index.html b/files/zh-cn/tools/responsive_design_mode/index.html index b0ea0712a4..b0ea0712a4 100644 --- a/files/zh-cn/tools/responsive_design_view/index.html +++ b/files/zh-cn/tools/responsive_design_mode/index.html diff --git a/files/zh-cn/tools/存储查看器/index.html b/files/zh-cn/tools/storage_inspector/index.html index 198d5d5b92..198d5d5b92 100644 --- a/files/zh-cn/tools/存储查看器/index.html +++ b/files/zh-cn/tools/storage_inspector/index.html diff --git a/files/zh-cn/tools/小技巧/index.html b/files/zh-cn/tools/tips/index.html index c7a2cfc304..c7a2cfc304 100644 --- a/files/zh-cn/tools/小技巧/index.html +++ b/files/zh-cn/tools/tips/index.html diff --git a/files/zh-cn/tools/using_the_source_editor/index.html b/files/zh-cn/tools/using_the_source_editor/index.html deleted file mode 100644 index f1169710b4..0000000000 --- a/files/zh-cn/tools/using_the_source_editor/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 使用源代码编辑器 -slug: Tools/Using_the_Source_Editor -translation_of: tools/Keyboard_shortcuts#Source_editor -translation_of_original: Tools/Using_the_Source_Editor ---- -<div>{{ToolsSidebar}}</div><p>源代码编辑器是一个编辑器组件,由源editor.jsm的Java Script代码模块的提供,这是共享的几个开发工具,包括暂存器和样式编辑器。它也可以被使用的Firefox扩展。本文说明如何使用编辑器来编辑文本。.</p> -<h2 id="Keyboard_commands" name="Keyboard_commands">键盘命令</h2> -<p>这些都是标准命令的快捷键;注意,某些附加产品,他们可能会有所不同。但火狐使用的总是这些。.</p> -<div class="note"> - <strong>注:</strong>在Mac OS X,使用Command键来代替控制键.</div> -<table class="standard-table"> - <thead> - <tr> - <th class="header">功能</th> - <th class="header">键盘</th> - </tr> - </thead> - <tbody> - <tr> - <td>选择所有</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>A</kbd></kbd></td> - </tr> - <tr> - <td>复制</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>C</kbd></kbd></td> - </tr> - <tr> - <td>查找</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>F</kbd></kbd></td> - </tr> - <tr> - <td>查找下一个</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>G</kbd></kbd></td> - </tr> - <tr> - <td>跳转行</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>L</kbd></kbd></td> - </tr> - <tr> - <td>重做</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>Shift</kbd>-<kbd>Z</kbd></kbd></td> - </tr> - <tr> - <td>粘贴</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>V</kbd></kbd></td> - </tr> - <tr> - <td>剪切</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>X</kbd></kbd></td> - </tr> - <tr> - <td>恢复</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>Z</kbd></kbd></td> - </tr> - <tr> - <td>行缩进(s)</td> - <td><kbd>Tab</kbd></td> - </tr> - <tr> - <td>取消行缩进</td> - <td><kbd><kbd>Shift</kbd>-<kbd>Tab</kbd></kbd></td> - </tr> - <tr> - <td>移动行(s) 上</td> - <td><kbd><kbd>Alt</kbd>-<kbd>↑</kbd></kbd><br> - (<kbd><kbd>Ctrl</kbd>-<kbd>Option</kbd>-<kbd>↑</kbd></kbd> on Mac OS X)</td> - </tr> - <tr> - <td>移动行(s) 下</td> - <td><kbd><kbd>Alt</kbd>-<kbd>↓</kbd></kbd><br> - (<kbd><kbd>Ctrl</kbd>-<kbd>Option</kbd>-<kbd>↓</kbd></kbd> on Mac OS X)</td> - </tr> - <tr> - <td>切换注释选择</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>/</kbd></kbd> {{fx_minversion_inline("14.0")}}</td> - </tr> - <tr> - <td>Move to bracket opening</td> - <td><kbd><kbd>Ctrl</kbd>-<kbd>[</kbd></kbd> {{fx_minversion_inline("14.0")}}</td> - </tr> - <tr> - <td>Move to bracket closing</td> - <td><kbd><kbd>Ctlr</kbd>-<kbd>]</kbd></kbd> {{fx_minversion_inline("14.0")}}</td> - </tr> - </tbody> -</table> -<h2 id="See_also" name="See_also">参阅</h2> -<ul> - <li><a href="/en-US/docs/Tools">工具</a></li> - <li><a href="/en-US/docs/Tools/Scratchpad">暂存</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor">编辑样式</a></li> -</ul> diff --git a/files/zh-cn/tools/web音频编辑器/index.html b/files/zh-cn/tools/web_audio_editor/index.html index cc5c8bd4f7..cc5c8bd4f7 100644 --- a/files/zh-cn/tools/web音频编辑器/index.html +++ b/files/zh-cn/tools/web_audio_editor/index.html |