Skip to content

Commit

Permalink
chore(zh-cn): handle urls of chrome.com (mdn#23704)
Browse files Browse the repository at this point in the history
Co-authored-by: A1lo <[email protected]>
  • Loading branch information
2 people authored and sora32127 committed Oct 6, 2024
1 parent c1c9d50 commit 27e4f01
Show file tree
Hide file tree
Showing 336 changed files with 366 additions and 393 deletions.
7 changes: 7 additions & 0 deletions files/zh-cn/.markdownlint.jsonc
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,13 @@
"replace": "](/",
"searchScope": "text",
},
{
"name": "chrome-dev-mirror-links",
"message": "Use the CN mirror site for developer.chrome.com",
"searchPattern": "/\\]\\(https:\\/\\/developer.chrome.com\\//g",
"replace": "](https://developer.chrome.google.cn/",
"searchScope": "text",
},
{
"name": "localhost-links",
"message": "Don't use localhost for links",
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/accessibility/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ l10n:

_无障碍_(Accessibility,缩写:**A11Y**)意味着让尽可能多的人(包括能力受限的)能够使用网站。实现此目标的最常见做法是确保无障碍技术可以正常访问内容。这些技术包括{{glossary("screen reader", "屏幕阅读器")}}、屏幕放大镜、语音识别工具以及替代输入设备等。

你可以使用类似 [Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/scoring)[Firefox 无障碍检查器](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html)这样的工具衡量你的网站的无障碍水平。
你可以使用类似 [Lighthouse](https://developer.chrome.google.cn/docs/lighthouse/accessibility/scoring)[Firefox 无障碍检查器](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html)这样的工具衡量你的网站的无障碍水平。

{{Glossary("W3C")}} 组织的 {{Glossary("WAI","Web 无障碍倡议")}}(WAI)正式地定义和论述了 Web 无障碍技术。

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/developer_tools/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@ l10n:
- 维基百科上的 [Web 开发者工具](https://zh.wikipedia.org/wiki/Web开发工具)
- [Firefox 开发者工具](https://firefox-source-docs.mozilla.org/devtools-user/index.html)
- [Firebug](https://getfirebug.com/)(Firefox 开发者工具的前身)
- chrome.com 上的 [Chrome 开发者工具](https://developer.chrome.com/devtools)
- chrome.com 上的 [Chrome 开发者工具](https://developer.chrome.google.cn/docs/devtools)
- apple.com.cn 上的 [Safari 开发者工具](https://support.apple.com/zh-cn/guide/safari-developer/dev073038698/mac)
- microsoft.com 上的 [Edge 开发者工具](https://docs.microsoft.com/archive/microsoft-edge/legacy/developer/)
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/first_cpu_idle/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ l10n:

- 替代首次 CPU 闲置的指标:
- [可交互时间](/zh-CN/docs/Glossary/Time_to_interactive)
- [总阻塞时间](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-total-blocking-time/)
- [总阻塞时间](https://developer.chrome.google.cn/docs/lighthouse/performance/lighthouse-total-blocking-time)
2 changes: 1 addition & 1 deletion files/zh-cn/glossary/synthetic_monitoring/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ l10n:

通过一致的基准,模拟监控非常适合测量代码更改对性能的影响。然而,它并不一定反映用户的实际体验。

模拟监控涉及部署脚本来模拟最终用户可能在 Web 应用程序中执行的路径,并报告模拟器体验的性能。流行的模拟监控工具示例包括 [WebPageTest](https://webpagetest.org)[Lighthouse](https://developer.chrome.google.cn/docs/lighthouse/overview/)。测量的流量不是实际用户的流量,而是为收集页面性能数据而综合生成的流量。
模拟监控涉及部署脚本来模拟最终用户可能在 Web 应用程序中执行的路径,并报告模拟器体验的性能。流行的模拟监控工具示例包括 [WebPageTest](https://webpagetest.org)[Lighthouse](https://developer.chrome.google.cn/docs/lighthouse/overview)。测量的流量不是实际用户的流量,而是为收集页面性能数据而综合生成的流量。

与{{glossary("Real user monitoring", "真实用户监控")}}(RUM)不同,模拟监控提供了一个狭窄的性能视图,不考虑用户差异,使其在获取应用程序性能的基本数据和在开发环境中进行性能抽查方面非常有用。结合其他工具,如网络限制,可以提供对潜在问题区域的极好见解。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ l10n:
了解更多 Inspector 在不同的浏览器中的细节:

- [Firefox 页面检查器](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/index.html)
- [Chrome DOM 检查器](https://developer.chrome.com/docs/devtools/dom/)(Opera 的 inspector 和它一样)
- [Chrome DOM 检查器](https://developer.chrome.google.cn/docs/devtools/dom)(Opera 的 inspector 和它一样)
- [Safari DOM 检查器和样式浏览器](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1)

## JavaScript 调试器
Expand Down Expand Up @@ -205,7 +205,7 @@ document.querySelector("h1").appendChild(loginImage);
了解更多 JavaScript 控制台在不同浏览器中的细节:

- [Firefox Web 控制台](https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html)
- [Chrome JavaScript 控制台](https://developer.chrome.com/docs/devtools/console/)(Opera 与它相同)
- [Chrome JavaScript 控制台](https://developer.chrome.google.cn/docs/devtools/console)(Opera 与它相同)
- [Safari 控制台](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1)

## 参见
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ web 刚面世时,这样的问题并不存在,在上世纪 90 年代早期至
> [!NOTE]
> 在桌面端浏览器测试上面的示例时,如果你把浏览器设到最小宽度,却没有加载更小的图片,请检查一下此时的视口是什么(你可以打开浏览器的 JavaScript 控制台,输入 `document.querySelector('html').clientWidth` 来获得近似视口宽度)。不同的浏览器设置了窗口可以缩小到的最小宽度,它可能比你想的更宽一点。使用移动端浏览器测试时,可以使用类似 Firefox 的 `about:debugging` 页这样的工具,使用桌面端开发者工具检查在移动端加载的页面。
>
> 要查看加载了哪些图像,你可以使用 Firefox 开发者工具的[网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)标签或 Chrome 开发者工具的[网络](https://developer.chrome.com/docs/devtools/network/)面板。对于 Chrome 浏览器,你可能还需要[禁用缓存](https://stackoverflow.com/a/7000899/13725861),以防止它选取已下载的图片。
> 要查看加载了哪些图像,你可以使用 Firefox 开发者工具的[网络监视器](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html)标签或 Chrome 开发者工具的[网络](https://developer.chrome.google.cn/docs/devtools/network)面板。对于 Chrome 浏览器,你可能还需要[禁用缓存](https://stackoverflow.com/a/7000899/13725861),以防止它选取已下载的图片。
不支持这些特性的旧版本浏览器,会忽略这些属性,它们直接越过并按常规加载 [`src`](/zh-CN/docs/Web/HTML/Element/img#src) 属性引用的图像文件。

Expand Down
4 changes: 2 additions & 2 deletions files/zh-cn/learn/performance/measuring_performance/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,15 +63,15 @@ slug: Learn/Performance/Measuring_performance

![Firefox 网络监视器显示已加载的素材列表以及每个素材的加载时间](network-monitor.png)

你还可以查看 [Chrome 的网络监视器文档](https://developer.chrome.com/docs/devtools/network/)
你还可以查看 [Chrome 的网络监视器文档](https://developer.chrome.google.cn/docs/devtools/network)

## 性能监视工具

你也可以使用浏览器性能监测工具,比如 [Firefox 性能监测器](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)来测量在执行不同操作时一个 web 应用或网站的用户界面性能。这可以指出可能拖慢你的 web 应用或网站速度的特性。

![开发者工具性能面板显示录制 #1. 的瀑布图](perf-monitor.png)

另见 [Chrome 性能工具文档](https://developer.chrome.com/docs/devtools/performance/)
另见 [Chrome 性能工具文档](https://developer.chrome.google.cn/docs/devtools/performance)

## 性能 API

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ fetch(requestURL).then((response) => {
不幸的是,我们仍然有同样的错误,问题并没有消失。现在让我们使用浏览器开发工具的一个更复杂的特性来调查一下这个问题,它在 Firefox 中被称为 [JavaScript 调试器](https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html)

> [!NOTE]
> 其他浏览器中也有类似的工具;Chrome 中的[来源面板](https://developer.chrome.com/docs/devtools/#sources)、Safari 中的调试器(见 [Safari Web 开发工具](https://developer.apple.com/safari/tools/))等。
> 其他浏览器中也有类似的工具;Chrome 中的[来源面板](https://developer.chrome.google.cn/docs/devtools#sources)、Safari 中的调试器(见 [Safari Web 开发工具](https://developer.apple.com/safari/tools/))等。
在 Firefox 中,调试器标签页大致如图所示:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ A 级:

模拟器基本上是在计算机内部运行的程序,用于模拟某种设备或特定的设备环境,使你能够更方便地进行一些测试,而无需寻找特定的硬件/软件组合进行测试。

模拟器可以简单地用于测试设备条件。例如,如果你想快速测试响应式设计中的宽度/高度媒体查询,可以使用 Firefox 的[响应式设计模式](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html)。Safari 也有类似的模式,可以通过转到“Safari > 首选项”并勾选“显示开发菜单”,然后选择“开发 > 进入响应式设计模式”来启用。Chrome 也有类似的功能:设备模式(参见[使用设备模式模拟移动设备](https://developer.chrome.com/docs/devtools/device-mode/))。
模拟器可以简单地用于测试设备条件。例如,如果你想快速测试响应式设计中的宽度/高度媒体查询,可以使用 Firefox 的[响应式设计模式](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html)。Safari 也有类似的模式,可以通过转到“Safari > 首选项”并勾选“显示开发菜单”,然后选择“开发 > 进入响应式设计模式”来启用。Chrome 也有类似的功能:设备模式(参见[使用设备模式模拟移动设备](https://developer.chrome.google.cn/docs/devtools/device-mode))。

然而,通常情况下,你需要安装某种模拟器。你可能需要测试的常见设备/浏览器如下:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ Netlify 部分的内容就到此为止。我们可以选择更改 Netlify 项目

- 能否在构建步骤中[压缩图片](https://github.com/ralscha/parcel-plugin-compress)
- 能否将 React 换成[更小的](https://preactjs.com/)依赖?
- 能否添加更多测试来防止糟糕的构建部署,例如[性能审核](https://developer.chrome.com/docs/lighthouse/performance/)
- 能否添加更多测试来防止糟糕的构建部署,例如[性能审核](https://developer.chrome.google.cn/docs/lighthouse/performance/performance-scoring)
- 能否设置一个通知,令你及时得知部署成功与否?

{{PreviousMenu("Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain", "Learn/Tools_and_testing/Understanding_client-side_tools")}}
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ l10n:
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#type-ColorArray) API。本文衍生于 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#type-ColorArray) API。本文衍生于 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ browser.action.onClicked.addListener((tab) => {
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-disable) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-disable) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ browser.action.onClicked.addListener(() => {
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-enable) API。该文档衍生于 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-enable) API。该文档衍生于 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ browser.action.getBadgeBackgroundColor({}).then(onGot, onFailure);
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-getBadgeBackgroundColor) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-getBadgeBackgroundColor) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ gettingBadgeText.then(gotBadgeText);
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-getBadgeText) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-getBadgeText) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ browser.action.getBadgeTextColor({}).then(onGot, onFailure);
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-getBadgeTextColor) API。该文档衍生于 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-getBadgeTextColor) API。该文档衍生于 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ gettingPopup.then(gotPopup);
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-getPopup) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-getPopup) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ browser.action.onClicked.addListener(() => {
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-getTitle) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-getTitle) API。该文档衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ gettingUserSettings.then(gotSettings);
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#method-getUserSettings) API。
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#method-getUserSettings) API。
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ l10n:
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#type-ImageDataType) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#type-ImageDataType) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ l10n:
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action/) API。该文档衍生自 Chromium 代码中的 [`action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action) API。该文档衍生自 Chromium 代码中的 [`action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ browser.action.onClicked.addListener((tab) => {
{{Compat}}

> [!NOTE]
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.com/docs/extensions/reference/api/action#event-onClicked) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
> 该 API 基于 Chromium 的 [`chrome.action`](https://developer.chrome.google.cn/docs/extensions/reference/api/action#event-onClicked) API。本文衍生自 Chromium 代码中的 [`browser_action.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json)
<!--
// Copyright 2015 The Chromium Authors. All rights reserved.
Expand Down
Loading

0 comments on commit 27e4f01

Please sign in to comment.