From ecb0ea8f4d746eba5723702bc6f1eb7e7f60e667 Mon Sep 17 00:00:00 2001 From: A1lo Date: Sun, 22 Sep 2024 22:01:14 +0800 Subject: [PATCH 001/218] zh-cn: update the translation of `Window.scroll()` (#23732) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/window/scroll/index.md | 49 +++++++++++++++++----- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/files/zh-cn/web/api/window/scroll/index.md b/files/zh-cn/web/api/window/scroll/index.md index 3d51190fc0edda..2a00f18996bfa6 100644 --- a/files/zh-cn/web/api/window/scroll/index.md +++ b/files/zh-cn/web/api/window/scroll/index.md @@ -1,34 +1,49 @@ --- -title: Window.scroll() +title: Window：scroll() 方法 slug: Web/API/Window/scroll +l10n: + sourceCommit: 20c51db7895b1b6f41d4fa90e71830f4b6678eea --- {{APIRef}} -滚动窗口至文档中的特定位置。 +**`Window.scroll()`** 方法滚动窗口至文档中的特定位置。 ## 语法 ```js-nolint -scroll(x-coord, y-coord) +scroll(xCoord, yCoord) scroll(options) ``` ### 参数 -- `x-coord` 值表示你想要置于左上角的像素点的横坐标。 -- `y-coord` 值表示你想要置于左上角的像素点的纵坐标。 - -\- 或者 - - -- `options` 值是一个 {{domxref("ScrollToOptions")}} 字典 +- `xCoord` + - : 你想要在左上角显示的文档水平轴像素。 +- `yCoord` + - : 你想要在左上角显示的文档垂直轴像素。 +- `options` + - : 包含以下属性的对象： + - `top` + - : 指定沿 Y 轴滚动窗口或元素的像素数。 + - `left` + - : 指定沿 X 轴滚动窗口或元素的像素数。 + - `behavior` + - : 确定滚动是即时完成还是以平滑动画进行。该选项是一个字符串，必须取以下值之一： + - `smooth`：滚动应该平滑地进行动画展示 + - `instant`：滚动应在一次跳转中即时完成 + - `auto`：滚动行为由 {{cssxref("scroll-behavior")}} 的计算值来决定 + +### 返回值 + +无（{{jsxref("undefined")}}）。 ## 示例 ```html - + ``` 使用 `options`: @@ -43,8 +58,20 @@ window.scroll({ ## 备注 -[window.scrollTo](/zh-CN/docs/Web/API/Window/scrollTo) 实际上和该方法是相同的。想要重复地滚动某个距离，请使用 [window.scrollBy](/zh-CN/docs/Web/API/Window/scrollBy). 参见 [window.scrollByLines](/zh-CN/docs/Web/API/Window/scrollByLines), [window.scrollByPages](/zh-CN/docs/Web/API/Window/scrollByPages). +{{domxref("Window.scrollTo()")}} 实际上和该方法是相同的。有关相对滚动，请参见 {{domxref("Window.scrollBy()")}}、{{domxref("Window.scrollByLines()")}} 和 {{domxref("Window.scrollByPages()")}}。 + +有关滚动元素，请参见 {{domxref("Element.scrollTop")}} 和 {{domxref("Element.scrollLeft")}}。 ## 规范 {{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Window.scrollByLines()")}} +- {{domxref("Window.scrollByPages()")}} +- {{domxref("Element.scrollIntoView()")}} From 4dce7dd916a09d6367c05d1681d4a65e21567118 Mon Sep 17 00:00:00 2001 From: Bang HoJin <132210541+banhogu@users.noreply.github.com> Date: Mon, 23 Sep 2024 00:24:21 +0900 Subject: [PATCH 002/218] [ko] translate css/css_multicol_layout/Handling content breaks in multi-column layout (#23560) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Handling_overflow_in_multicol_layout 한국어 번역 * CSS_multicol_layout/Handling_content_breaks_in_multicol_layout 한국어 번역 * fix: 번역 수정본 1차 --- .../index.md | 63 +++++++++++++++++++ .../index.md | 46 ++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 files/ko/web/css/css_multicol_layout/handling_content_breaks_in_multicol_layout/index.md create mode 100644 files/ko/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md diff --git a/files/ko/web/css/css_multicol_layout/handling_content_breaks_in_multicol_layout/index.md b/files/ko/web/css/css_multicol_layout/handling_content_breaks_in_multicol_layout/index.md new file mode 100644 index 00000000000000..39b0bb1bfdb4a2 --- /dev/null +++ b/files/ko/web/css/css_multicol_layout/handling_content_breaks_in_multicol_layout/index.md @@ -0,0 +1,63 @@ +--- +title: 다단 레이아웃에서 콘텐츠 분리 처리 +slug: Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout +l10n: + sourceCommit: f7b308af624b3ec6acfeef1c06d7a8c9ac46410d +--- + +{{CSSRef}} + +다단 레이아웃에서 열 상자 사이의 콘텐츠는 페이지가 나뉘는 방식과 유사하게 나뉩니다. 두 경우 모두 [CSS 분할](/ko/docs/Web/CSS/CSS_fragmentation) 모듈의 속성을 사용하여 콘텐츠가 어디에서 어떻게 나뉘는지를 제어할 수 있습니다. 이 안내서에서는 다단 컨테이너 (짧게는 멀티콜 컨테이너)에서 분할이 어떻게 작동하는지 살펴봅니다. + +## 분할 기본 사항 + +CSS 분할 모듈은 분할 컨테이너 또는 분할기 사이에서 콘텐츠가 어떻게 나뉘는지에 대한 세부 정보를 제공합니다. [다단 레이아웃](/ko/docs/Web/CSS/CSS_multicol_layout) 모듈은 열 사이와 열 내부에서 일부 제어를 제공하는 {{cssxref("break-after")}}, {{cssxref("break-before")}}, {{cssxref("break-inside")}} 속성을 정의합니다. 다단 레이아웃에서 열 상자는 분할 컨테이너입니다. + +열 상자는 다른 마크업을 포함할 수 있으며, 분할이 이상적이지 않은 경우가 많습니다. 예를 들어, 이미지의 캡션이 이미지와 분리된 새로운 열로 넘어가는 것을 일반적으로 선호하지 않습니다. 또한, 열의 끝에 제목이 있으면 어색해 보입니다. 다중 열 분할 속성은 이러한 상황에서 콘텐츠의 분할을 제어할 수 있는 방법을 제공합니다. + +분할을 제어하고 싶은 다양한 위치가 있습니다. + +- 상자 내부의 분할, 예를 들어 figure 요소 내부. +- 상자 전후의 분할, 위의 제목 예제를 포함. +- 줄 사이의 분할. + +## 상자 내부의 분할 + +상자 내부의 분할을 제어하려면 {{cssxref("break-inside")}} 속성을 사용합니다. 이 속성은 다음과 같은 값을 가집니다 + +- `auto` +- `avoid` +- `avoid-page` +- `avoid-column` +- `avoid-region` + +아래 예제에서는 figure 요소에 break-inside를 적용하여 캡션이 이미지와 분리되지 않도록 방지합니다. + +{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}} + +## 상자 전후의 분할 + +{{cssxref("break-before")}}와 {{cssxref("break-after")}} 속성은 요소 전후의 분할을 제어하는 데 사용됩니다. 다단 맥락에서는 다음과 같은 값을 가집니다. + +- auto +- avoid +- avoid-column +- column + +다음 예제에서는 `h2` 요소 전에 열 분할을 강제로 적용하고 있습니다. + +{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}} + +## 줄 사이의 분할 + +{{cssxref("orphans")}}와 {{cssxref("widows")}} 속성은 CSS 분할 모듈의 일부로, 유용하며 언급할 가치가 있습니다. `orphans` 속성은 구간의 끝에서 혼자 남은 줄의 수를 제어합니다. `widows` 속성은 구간의 시작에서 혼자 남은 줄의 수를 제어합니다. + +`orphans`와 `widows` 속성은 {{CSSXref("integer")}} 값을 가지며, 이는 각각 구간의 끝과 시작에서 함께 유지할 줄의 수를 나타냅니다. 이 속성들은 블록 컨테이너, 예를 들어 단락 내에서만 작동합니다. 블록에 지정한 값보다 적은 줄이 포함된 경우, 모든 줄이 함께 유지됩니다. + +아래 예제에서는 `orphans` 속성을 사용하여 열의 하단에 남는 줄의 수를 제어합니다. 값을 변경하여 콘텐츠의 분할에 미치는 영향을 확인할 수 있습니다. + +{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}} + +## 예상과 다른 결과가 나올 때 + +컨텐츠가 적고 여러 요소에서 분할을 제어하려는 경우, 콘텐츠는 어딘가에서 분할될 필요가 있으므로 항상 원하는 결과를 얻을 수는 없습니다. 분할 사용은 브라우저에 대한 제안일 뿐이며, 가능하다면 이런 방식으로 분할을 제어하라는 것입니다. 콘텐츠가 의도한 대로 분할되지 않는 경우 결과가 어지러울 수 있지만, 여전히 사용자에게 콘텐츠는 제공됩니다. diff --git a/files/ko/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md b/files/ko/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md new file mode 100644 index 00000000000000..d16da093443920 --- /dev/null +++ b/files/ko/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md @@ -0,0 +1,46 @@ +--- +title: 다단 레이아웃에서 넘침 처리 +slug: Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout +l10n: + sourceCommit: f7b308af624b3ec6acfeef1c06d7a8c9ac46410d +--- + +{{CSSRef}} + +이 안내서에서는 다단 (_multicol_) 레이아웃에서 넘침을 처리하는 방법을 살펴봅니다. 열 상자 내부의 넘침뿐만 아니라 컨테이너에 맞지 않는 콘텐츠가 있을 때의 상황도 다룹니다 + +## 열 상자 내부의 넘침 + +항목의 크기가 열 상자보다 클 때 넘침 상황이 발생합니다. 예를 들어, 열 안에 있는 이미지가 `column-width` 값이나 `column-count`로 선언된 열의 개수를 기반으로 한 열 너비보다 넓을 때 이러한 상황이 발생할 수 있습니다. + +이 경우, 콘텐츠는 열 상자에 의해 잘리지 않고 다음 열로 눈에 보이게 넘쳐야 합니다. + +{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}} + +두 개의 텍스트 열이 있습니다. 왼쪽 열에는 열 너비보다 넓은 사진이 있으며, 이미지가 두 번째 열로 확장되어 오른쪽 열의 텍스트 뒤에 나타납니다. 오른쪽 열의 텍스트 흐름은 튀어나온 사진에 영향을 받지 않지만, 시각적인 모습은 달라집니다. + +이미지를 열 상자에 맞추고 싶다면 `max-width: 100%`를 설정하면 이미지가 해당 컨테이너, 즉 열 상자를 넘어서 커지지 않도록 할 수 있습니다. + +{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}} + +## 들어갈 수 있는 열보다 많은 열이 있을 때 + +열이 넘치는 상황에서 어떻게 처리되는지는 매체의 종류에 따라 달라집니다. 매체가 인쇄물처럼 나뉜 경우(예: 책 페이지), 한 페이지에 열이 다 채워지면, 나머지 열은 다음 페이지로 이동해 그 페이지도 열로 채웁니다. + +반면, 웹 페이지처럼 연속적인 매체에서는 열이 화면 너비를 넘으면 옆으로 넘치게 되고, 그 결과 가로 스크롤바가 생깁니다. + +아래 예시는 이러한 넘침 현상을 보여줍니다. 다단 컨테이너에 {{CSSXref("height")}}가 설정되어 있고, 텍스트가 너무 많아 컨테이너 밖으로 열이 만들어지는 경우입니다. + +{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}} + +## 수직 미디어 쿼리 사용하기 + +웹에서 다단 레이아웃을 사용할 때 발생할 수 있는 문제 중 하나는 열이 뷰포트보다 높으면 사용자가 페이지를 위아래로 스크롤해야 한다는 점입니다. 이는 좋은 사용자 경험을 제공하지 못합니다. 이를 피하는 한 가지 방법은 수직 공간이 충분할 때만 열 속성을 적용하는 것입니다. + +아래 예시에서는 {{CSSXref("min-height")}}와 [@미디어 쿼리](/ko/docs/Web/CSS/CSS_media_queries/Using_media_queries) 쿼리를 사용하여 열 속성을 적용하기 전에 수직 공간이 충분한지 확인합니다. + +{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}} + +## 다음 단계 + +이 시리즈의 마지막 안내서에서는 [다단 레이아웃에서 콘텐츠 분리가 어떻게 작동하는지 살펴보고](/ko/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout), 열 사이에서 콘텐츠가 어떻게 나뉘는지 제어하는 방법을 알아봅니다. From 0836ed71a410eb4fe3c67083213fda41b09c8ce1 Mon Sep 17 00:00:00 2001 From: Chanmin Date: Mon, 23 Sep 2024 00:25:27 +0900 Subject: [PATCH 003/218] docs(ko): Update Error instance's method docs. (#23491) * docs(ko): update Error.prototype.cause, Error.prototype.name * chore: update deprecated docs property * Update files/ko/web/javascript/reference/global_objects/error/filename/index.md Co-authored-by: 1ilsang <1ilsangc@gmail.com> * Update files/ko/web/javascript/reference/global_objects/error/linenumber/index.md Co-authored-by: 1ilsang <1ilsangc@gmail.com> * Update files/ko/web/javascript/reference/global_objects/error/message/index.md Co-authored-by: 1ilsang <1ilsangc@gmail.com> * Update files/ko/web/javascript/reference/global_objects/error/cause/index.md Co-authored-by: 1ilsang <1ilsangc@gmail.com> --------- Co-authored-by: 1ilsang <1ilsangc@gmail.com> --- .../global_objects/error/cause/index.md | 12 +++++++--- .../error/columnnumber/index.md | 22 ++++++++++++----- .../global_objects/error/filename/index.md | 18 ++++++++++---- .../global_objects/error/linenumber/index.md | 24 +++++++++++++------ .../global_objects/error/message/index.md | 14 ++++++++--- .../global_objects/error/name/index.md | 14 ++++++++--- 6 files changed, 77 insertions(+), 27 deletions(-) diff --git a/files/ko/web/javascript/reference/global_objects/error/cause/index.md b/files/ko/web/javascript/reference/global_objects/error/cause/index.md index 8086e91cabb3e8..cacff0e2fd7df5 100644 --- a/files/ko/web/javascript/reference/global_objects/error/cause/index.md +++ b/files/ko/web/javascript/reference/global_objects/error/cause/index.md @@ -1,17 +1,23 @@ --- -title: Error.prototype.cause +title: "Error: cause" slug: Web/JavaScript/Reference/Global_Objects/Error/cause +l10n: + sourceCommit: 6a0f9553932823cd0c4dcf695d4b4813474964fb --- {{JSRef}} -**`cause`** 속성은 오류의 구체적인 원래 원인을 나타냅니다. +{{jsxref("Error")}} 인스턴스의 **`cause`** 데이터 속성은 오류의 구체적인 원래 원인을 나타냅니다. 예외를 잡아서 다시 예외를 발생시킬 때 원래 발생한 오류에 접근 할 수 있으면서 보다 구체적인 혹은 유용한 에러 메시지를 추가할때 사용합니다. ## 값 -`options.cause` 인자의 [`Error()` 생성자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Error/Error)에 전달되는 값입니다. +`options.cause` 인자의 [`Error()` 생성자](/ko/docs/Web/JavaScript/Reference/Global_Objects/Error/Error)에 전달되는 값입니다. 존재하지 않을 수도 있습니다. + +{{js_property_attributes(1, 0, 1)}} + +## 설명 값은 어떤 타입이든 가능합니다. `catch`문의 변수 역시 `Error`라고 확신할 수 없는 것과 마찬가지로 여러분이 처리할 오류의 `cause`에 `Error`가 있다고 가정하지 마시기 바랍니다. 아래의 예제 "오류 원인으로 구조화된 데이터 제공"는 의도적으로 오류가 아닌 것을 `cause`로 제공하는 경우를 보여줍니다. diff --git a/files/ko/web/javascript/reference/global_objects/error/columnnumber/index.md b/files/ko/web/javascript/reference/global_objects/error/columnnumber/index.md index 99ec5b0e38c9bd..52b863d91c0b89 100644 --- a/files/ko/web/javascript/reference/global_objects/error/columnnumber/index.md +++ b/files/ko/web/javascript/reference/global_objects/error/columnnumber/index.md @@ -1,20 +1,30 @@ --- -title: Error.prototype.columnNumber +title: "Error: columnNumber" slug: Web/JavaScript/Reference/Global_Objects/Error/columnNumber +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- -{{JSRef}} {{non-standard_header}} +{{JSRef}} {{Non-standard_Header}} -**`columnNumber`** 속성은 이 오류가 발생한 파일의 행의 열 번호를 포함합니다. +{{jsxref("Error")}} 인스턴스의 **`columnNumber`** 데이터 속성은 이 오류가 발생한 파일의 행의 열 번호를 포함합니다. + +## 값 + +양의 정수. + +{{js_property_attributes(1, 0, 1)}} ## 예제 ### columnNumber 사용하기 ```js -var e = new Error("Could not parse input"); -throw e; -console.log(e.columnNumber); // 0 +try { + throw new Error("Could not parse input"); +} catch (err) { + console.log(err.columnNumber); // 9 +} ``` ## 명세 diff --git a/files/ko/web/javascript/reference/global_objects/error/filename/index.md b/files/ko/web/javascript/reference/global_objects/error/filename/index.md index b6e6ab54cdfc5e..7d065ada01f188 100644 --- a/files/ko/web/javascript/reference/global_objects/error/filename/index.md +++ b/files/ko/web/javascript/reference/global_objects/error/filename/index.md @@ -1,11 +1,19 @@ --- -title: Error.prototype.fileName +title: "Error: fileName" slug: Web/JavaScript/Reference/Global_Objects/Error/fileName +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- -{{JSRef}} {{non-standard_header}} +{{JSRef}} {{Non-standard_Header}} -**`fileName`** 속성은 이 오류가 발생한 파일의 경로를 포함합니다. +{{jsxref("Error")}} 인스턴스의 **`fileName`** 데이터 속성은 이 오류가 발생한 파일의 경로를 포함합니다. + +## 값 + +문자열. + +{{js_property_attributes(1, 0, 1)}} ## 설명 @@ -16,9 +24,9 @@ slug: Web/JavaScript/Reference/Global_Objects/Error/fileName ### fileName 사용하기 ```js -var e = new Error("Could not parse input"); +const e = new Error("Could not parse input"); throw e; -// e.fileName could look like "file:///C:/example.html" +// e.fileName은 "file:///C:/example.html" 처럼 보일 수 있습니다. ``` ## 명세 diff --git a/files/ko/web/javascript/reference/global_objects/error/linenumber/index.md b/files/ko/web/javascript/reference/global_objects/error/linenumber/index.md index f2cc2a2797c378..0995e971cf751f 100644 --- a/files/ko/web/javascript/reference/global_objects/error/linenumber/index.md +++ b/files/ko/web/javascript/reference/global_objects/error/linenumber/index.md @@ -1,20 +1,30 @@ --- -title: Error.prototype.lineNumber +title: "Error: lineNumber" slug: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +l10n: + sourceCommit: 5c3c25fd4f2fbd7a5f01727a65c2f70d73f1880a --- -{{JSRef}} {{non-standard_header}} +{{JSRef}} {{Non-standard_Header}} -**`lineNumber`** 속성은 이 오류가 발생한 파일의 행 번호를 포함합니다. +{{jsxref("Error")}} 인스턴스의 **`lineNumber`** 데이터 속성은 이 오류가 발생한 파일의 행 번호를 포함합니다. + +## 값 + +양의 정수. + +{{js_property_attributes(1, 0, 1)}} ## 예제 ### lineNumber 사용하기 ```js -var e = new Error("Could not parse input"); -throw e; -console.log(e.lineNumber); // 2 +try { + throw new Error("Could not parse input"); +} catch (err) { + console.log(err.lineNumber); // 2 +} ``` ### 오류 이벤트를 사용하는 또 다른 예제 @@ -23,7 +33,7 @@ console.log(e.lineNumber); // 2 window.addEventListener("error", function (e) { console.log(e.lineNumber); // 5 }); -var e = new Error("Could not parse input"); +const e = new Error("Could not parse input"); throw e; ``` diff --git a/files/ko/web/javascript/reference/global_objects/error/message/index.md b/files/ko/web/javascript/reference/global_objects/error/message/index.md index 137dbd85e077de..db96105e768bd5 100644 --- a/files/ko/web/javascript/reference/global_objects/error/message/index.md +++ b/files/ko/web/javascript/reference/global_objects/error/message/index.md @@ -1,15 +1,23 @@ --- -title: Error.prototype.message +title: "Error: message" slug: Web/JavaScript/Reference/Global_Objects/Error/message +l10n: + sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a --- {{JSRef}} -**`message`** 속성은 사람이 읽을 수 있는 오류의 설명입니다. +{{jsxref("Error")}} 인스턴스의 **`message`** 데이터 속성은 사람이 읽을 수 있는 오류의 설명입니다. + +## 값 + +[`Error()`](/ko/docs/Web/JavaScript/Reference/Global_Objects/Error/Error) 생성자에 첫 번째 인수로 전달된 값에 해당하는 문자열. + +{{js_property_attributes(1, 0, 1)}} ## 설명 -이 속성은 오류가 있거나 설정된 경우 오류에 대한 간략한 설명을 포함합니다. [SpiderMonkey](/ko/docs/Mozilla/Projects/SpiderMonkey)는 예외적으로 `message` 속성을 광범위하게 사용합니다. {{jsxref("Error.prototype.name", "name")}} 속성과 결합된 `message` 속성은 {{jsxref("Error.prototype.toString()")}} 메서드에서 오류의 문자열 표현을 생성하는 데 사용됩니다. +이 속성은 오류가 있거나 설정된 경우 오류에 대한 간략한 설명을 포함합니다. {{jsxref("Error/name", "name")}} 속성과 결합된 `message` 속성은 {{jsxref("Error.prototype.toString()")}}메서드에서 오류의 문자열 표현을 생성하는 데 사용됩니다. 기본적으로 `message` 속성은 빈 문자열이지만, {{jsxref("Error/Error", "Error")}} 생성자에 대한 첫 번째 인수로 메시지를 지정하여 인스턴스에 대해 이 동작을 재정의할 수 있습니다. diff --git a/files/ko/web/javascript/reference/global_objects/error/name/index.md b/files/ko/web/javascript/reference/global_objects/error/name/index.md index dc932ed041fb04..26c411826ac843 100644 --- a/files/ko/web/javascript/reference/global_objects/error/name/index.md +++ b/files/ko/web/javascript/reference/global_objects/error/name/index.md @@ -1,16 +1,24 @@ --- title: Error.prototype.name slug: Web/JavaScript/Reference/Global_Objects/Error/name +l10n: + sourceCommit: 6b728699f5f38f1070a94673b5e7afdb1102a941 --- {{JSRef}} -**`name`** 속성은 오류 타입을 설명하기 위한 이름을 나타냅니다. 초기값은 "Error"입니다. +`Error.prototype`의 **`name`** 데이터 속성은 모든 {{jsxref("Error")}} 인스턴스에서 공유됩니다. 이 속성은 오류의 종류를 나타내는 이름을 나타냅니다. `Error.prototype.name`의 초기 값은 `"Error"`입니다. {{jsxref("TypeError")}} 및 {{jsxref("SyntaxError")}}와 같은 하위 클래스는 자체적인 `name` 속성을 제공합니다. + +## 값 + +문자열. `Error.prototype.name`의 초기 값은 문자열 `"Error"` 입니다. + +{{js_property_attributes(1, 0, 1)}} ## 설명 기본적으로 {{jsxref("Error")}} 인스턴스에는 "Error"라는 이름을 갖습니다. `name` 속성과 -{{jsxref("Error.prototype.message", "message")}} 속성은 {{jsxref("Error.prototype.toString()")}} 메서드에서 오류의 문자열 표현을 생성하는 데 +{{jsxref("Error/message", "message")}} 속성은 {{jsxref("Error.prototype.toString()")}} 메서드에서 오류의 문자열 표현을 생성하는 데 사용됩니다. ## 예제 @@ -18,7 +26,7 @@ slug: Web/JavaScript/Reference/Global_Objects/Error/name ### 사용자 정의 에러 발생시키기 ```js -var e = new Error("Malformed input"); // e.name은 'Error' +const e = new Error("Malformed input"); // e.name은 'Error' e.name = "ParseError"; throw e; From 78ab57c51399f3ab844b5ff7d33799f31b50d084 Mon Sep 17 00:00:00 2001 From: deltoro05 <162127830+deltoro05@users.noreply.github.com> Date: Mon, 23 Sep 2024 02:08:13 +0300 Subject: [PATCH 004/218] Update index.md (#18438) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit change url to symbl.cc Co-authored-by: Josiel Rocha <1158643+josielrocha@users.noreply.github.com> Co-authored-by: Nathália Pissuti From 1e34b2c38f4ab2dc6ff51d087e24fa96d2ba3c0f Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 23 Sep 2024 08:54:54 +0800 Subject: [PATCH 005/218] chore(pt-br): handling redirects of chrome.com (#23711) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(pt-br): handling redirects of chrome.com * Apply suggestions from code review * fix: remove language query * Update files/pt-br/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md * Update files/pt-br/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md * Update files/pt-br/web/api/console/assert_static/index.md * Update files/pt-br/web/api/console/timestamp_static/index.md --------- Co-authored-by: Nathália Pissuti --- .../tools_and_setup/what_are_browser_developer_tools/index.md | 4 ++-- files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.md | 2 +- .../mozilla/add-ons/webextensions/api/bookmarks/index.md | 2 +- .../mozilla/add-ons/webextensions/api/browsingdata/index.md | 2 +- .../add-ons/webextensions/api/browsingdata/remove/index.md | 2 +- .../webextensions/api/browsingdata/removecache/index.md | 2 +- .../webextensions/api/browsingdata/removecookies/index.md | 2 +- .../webextensions/api/browsingdata/removedownloads/index.md | 2 +- .../webextensions/api/browsingdata/removeformdata/index.md | 2 +- .../webextensions/api/browsingdata/removehistory/index.md | 2 +- .../pt-br/mozilla/add-ons/webextensions/api/commands/index.md | 2 +- .../pt-br/mozilla/add-ons/webextensions/api/cookies/index.md | 2 +- files/pt-br/mozilla/add-ons/webextensions/api/menus/index.md | 4 ++-- files/pt-br/mozilla/add-ons/webextensions/index.md | 2 +- .../add-ons/webextensions/what_are_webextensions/index.md | 2 +- files/pt-br/web/api/console/assert_static/index.md | 2 +- files/pt-br/web/api/console/timestamp_static/index.md | 2 +- files/pt-br/web/tutorials/index.md | 2 +- 18 files changed, 20 insertions(+), 20 deletions(-) diff --git a/files/pt-br/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/pt-br/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index bf62b6c7709d24..25b173c98f6a6d 100644 --- a/files/pt-br/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/pt-br/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -94,7 +94,7 @@ Descubra mais sobre o Inspetor em diferentes navegadores: - [Inspetor de páginas do Firefox](/pt-BR/docs/Tools/Page_Inspector) - [IE DOM Explorer](http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx) -- [Chrome DOM inspector](https://developer.chrome.com/devtools/docs/dom-and-styles) (Inspetor da Opera funciona da mesma forma) +- [Chrome DOM inspector](https://developer.chrome.com/docs/devtools/dom) (Inspetor da Opera funciona da mesma forma) - [Inspetor do Safari DOM e explorador de estilo](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1) ## O depurador JavaScript @@ -203,7 +203,7 @@ Descubra mais sobre o console JavaScript em diferentes navegadores: - [Firefox Web Console](/pt-BR/docs/Tools/Web_Console) - [IE JavaScript console](http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx) -- [Chrome JavaScript Console](https://developer.chrome.com/devtools/docs/console) (O inspetor do Ópera funciona da mesma forma) +- [Chrome JavaScript Console](https://developer.chrome.com/docs/devtools/console) (O inspetor do Ópera funciona da mesma forma) - [Safari Console](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) ## Veja também diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.md b/files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.md index f0b3d1d4172451..12fd0022f8bb3d 100644 --- a/files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.md +++ b/files/pt-br/mozilla/add-ons/webextensions/api/alarms/index.md @@ -36,4 +36,4 @@ Para usar estas API você precisa ter a "alarms" [permission](/pt-BR/docs/Mozill {{Compat}} {{WebExtExamples("h2")}} -> **Nota:** **Agradecimentos**Esta API é baseada na API Chromium's [`chrome.alarms`](https://developer.chrome.com/extensions/alarms) .Dados de compatibilidade do Microsoft Edge fornecidos pela Microsoft Corporation aqui inclusos sob a Creative Commons Attribution 3.0 United States License. +> **Nota:** **Agradecimentos**Esta API é baseada na API Chromium's [`chrome.alarms`](https://developer.chrome.com/docs/extensions/reference/api/alarms) .Dados de compatibilidade do Microsoft Edge fornecidos pela Microsoft Corporation aqui inclusos sob a Creative Commons Attribution 3.0 United States License. diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/bookmarks/index.md b/files/pt-br/mozilla/add-ons/webextensions/api/bookmarks/index.md index 2654c9c8c19b16..103ddb9f336179 100644 --- a/files/pt-br/mozilla/add-ons/webextensions/api/bookmarks/index.md +++ b/files/pt-br/mozilla/add-ons/webextensions/api/bookmarks/index.md @@ -68,7 +68,7 @@ Para utilizar esta API, uma extensão deve ser requisitada para o "bookmarks" [p {{WebExtExamples("h2")}} -> **Nota:** **Agradecimentos**Esta API é baseada na API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks) . Esta documentação é derivada do [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) no código do Chromium.Os dados de compatibilidade do Microsoft Edge são fornecidos pela Microsoft Corporation e aqui estão sob a Creative Commons Attribution 3.0 United States License. +> **Nota:** **Agradecimentos**Esta API é baseada na API Chromium [`chrome.bookmarks`](https://developer.chrome.com/docs/extensions/reference/api/bookmarks) . Esta documentação é derivada do [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) no código do Chromium.Os dados de compatibilidade do Microsoft Edge são fornecidos pela Microsoft Corporation e aqui estão sob a Creative Commons Attribution 3.0 United States License. From a4c701a2e54ba097203c9a43a253dc0c1f461d26 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Mon, 23 Sep 2024 21:12:14 +0800 Subject: [PATCH 027/218] chore(zh-cn): handle urls of chrome.com (#23704) Co-authored-by: A1lo --- files/zh-cn/.markdownlint.jsonc | 7 +++++++ files/zh-cn/glossary/accessibility/index.md | 2 +- files/zh-cn/glossary/developer_tools/index.md | 2 +- files/zh-cn/glossary/first_cpu_idle/index.md | 2 +- files/zh-cn/glossary/synthetic_monitoring/index.md | 2 +- .../what_are_browser_developer_tools/index.md | 4 ++-- .../responsive_images/index.md | 2 +- .../performance/measuring_performance/index.md | 4 ++-- .../cross_browser_testing/javascript/index.md | 2 +- .../testing_strategies/index.md | 2 +- .../deployment/index.md | 2 +- .../webextensions/api/action/colorarray/index.md | 2 +- .../webextensions/api/action/disable/index.md | 2 +- .../webextensions/api/action/enable/index.md | 2 +- .../api/action/getbadgebackgroundcolor/index.md | 2 +- .../webextensions/api/action/getbadgetext/index.md | 2 +- .../api/action/getbadgetextcolor/index.md | 2 +- .../webextensions/api/action/getpopup/index.md | 2 +- .../webextensions/api/action/gettitle/index.md | 2 +- .../api/action/getusersettings/index.md | 2 +- .../api/action/imagedatatype/index.md | 2 +- .../add-ons/webextensions/api/action/index.md | 2 +- .../webextensions/api/action/onclicked/index.md | 2 +- .../api/action/setbadgebackgroundcolor/index.md | 2 +- .../webextensions/api/action/setbadgetext/index.md | 2 +- .../api/action/setbadgetextcolor/index.md | 2 +- .../webextensions/api/action/seticon/index.md | 2 +- .../webextensions/api/action/setpopup/index.md | 2 +- .../webextensions/api/action/settitle/index.md | 2 +- .../webextensions/api/alarms/alarm/index.md | 2 +- .../webextensions/api/alarms/clear/index.md | 2 +- .../webextensions/api/alarms/clearall/index.md | 2 +- .../webextensions/api/alarms/create/index.md | 2 +- .../add-ons/webextensions/api/alarms/get/index.md | 2 +- .../webextensions/api/alarms/getall/index.md | 2 +- .../add-ons/webextensions/api/alarms/index.md | 2 +- .../webextensions/api/alarms/onalarm/index.md | 2 +- .../api/bookmarks/bookmarktreenode/index.md | 2 +- .../bookmarktreenodeunmodifiable/index.md | 2 +- .../webextensions/api/bookmarks/create/index.md | 2 +- .../api/bookmarks/createdetails/index.md | 2 +- .../webextensions/api/bookmarks/get/index.md | 2 +- .../api/bookmarks/getchildren/index.md | 2 +- .../webextensions/api/bookmarks/getrecent/index.md | 2 +- .../api/bookmarks/getsubtree/index.md | 2 +- .../webextensions/api/bookmarks/gettree/index.md | 2 +- .../add-ons/webextensions/api/bookmarks/index.md | 2 +- .../webextensions/api/bookmarks/move/index.md | 2 +- .../webextensions/api/bookmarks/onchanged/index.md | 2 +- .../api/bookmarks/onchildrenreordered/index.md | 2 +- .../webextensions/api/bookmarks/oncreated/index.md | 2 +- .../api/bookmarks/onimportbegan/index.md | 2 +- .../api/bookmarks/onimportended/index.md | 2 +- .../webextensions/api/bookmarks/onmoved/index.md | 2 +- .../webextensions/api/bookmarks/onremoved/index.md | 2 +- .../webextensions/api/bookmarks/remove/index.md | 2 +- .../api/bookmarks/removetree/index.md | 2 +- .../webextensions/api/bookmarks/search/index.md | 2 +- .../webextensions/api/bookmarks/update/index.md | 2 +- .../api/browseraction/colorarray/index.md | 2 +- .../api/browseraction/disable/index.md | 2 +- .../api/browseraction/enable/index.md | 2 +- .../browseraction/getbadgebackgroundcolor/index.md | 2 +- .../api/browseraction/getbadgetext/index.md | 2 +- .../api/browseraction/getbadgetextcolor/index.md | 2 +- .../api/browseraction/getpopup/index.md | 2 +- .../api/browseraction/gettitle/index.md | 2 +- .../api/browseraction/imagedatatype/index.md | 2 +- .../webextensions/api/browseraction/index.md | 2 +- .../api/browseraction/onclicked/index.md | 2 +- .../browseraction/setbadgebackgroundcolor/index.md | 2 +- .../api/browseraction/setbadgetext/index.md | 2 +- .../api/browseraction/setbadgetextcolor/index.md | 2 +- .../api/browseraction/seticon/index.md | 2 +- .../api/browseraction/setpopup/index.md | 2 +- .../api/browseraction/settitle/index.md | 2 +- .../api/browsingdata/datatypeset/index.md | 2 +- .../webextensions/api/browsingdata/index.md | 2 +- .../api/browsingdata/removaloptions/index.md | 2 +- .../webextensions/api/browsingdata/remove/index.md | 2 +- .../api/browsingdata/removecache/index.md | 2 +- .../api/browsingdata/removecookies/index.md | 2 +- .../api/browsingdata/removedownloads/index.md | 2 +- .../api/browsingdata/removeformdata/index.md | 2 +- .../api/browsingdata/removehistory/index.md | 2 +- .../api/browsingdata/removelocalstorage/index.md | 2 +- .../api/browsingdata/removepasswords/index.md | 2 +- .../api/browsingdata/removeplugindata/index.md | 2 +- .../api/browsingdata/settings/index.md | 2 +- .../api/captiveportal/canonicalurl/index.md | 2 +- .../add-ons/webextensions/api/clipboard/index.md | 4 ++-- .../api/clipboard/setimagedata/index.md | 4 ++-- .../webextensions/api/commands/command/index.md | 2 +- .../webextensions/api/commands/getall/index.md | 2 +- .../add-ons/webextensions/api/commands/index.md | 2 +- .../webextensions/api/commands/oncommand/index.md | 2 +- .../webextensions/api/cookies/cookie/index.md | 2 +- .../webextensions/api/cookies/cookiestore/index.md | 2 +- .../add-ons/webextensions/api/cookies/get/index.md | 2 +- .../webextensions/api/cookies/getall/index.md | 2 +- .../api/cookies/getallcookiestores/index.md | 2 +- .../add-ons/webextensions/api/cookies/index.md | 2 +- .../webextensions/api/cookies/onchanged/index.md | 2 +- .../api/cookies/onchangedcause/index.md | 2 +- .../webextensions/api/cookies/remove/index.md | 2 +- .../add-ons/webextensions/api/cookies/set/index.md | 2 +- .../add-ons/webextensions/api/devtools/index.md | 2 +- .../api/devtools/inspectedwindow/index.md | 4 ++-- .../webextensions/api/devtools/network/index.md | 2 +- .../webextensions/api/devtools/panels/index.md | 4 ++-- .../api/dom/openorclosedshadowroot/index.md | 2 +- .../api/downloads/acceptdanger/index.md | 2 +- .../webextensions/api/downloads/cancel/index.md | 2 +- .../webextensions/api/downloads/download/index.md | 2 +- .../api/downloads/downloaditem/index.md | 2 +- .../add-ons/webextensions/api/downloads/index.md | 2 +- .../webextensions/api/events/event/index.md | 2 +- .../add-ons/webextensions/api/events/index.md | 2 +- .../add-ons/webextensions/api/events/rule/index.md | 2 +- .../webextensions/api/events/urlfilter/index.md | 2 +- .../api/extension/getextensiontabs/index.md | 2 +- .../webextensions/api/extension/getviews/index.md | 2 +- .../api/extension/inincognitocontext/index.md | 2 +- .../extension/isallowedfileschemeaccess/index.md | 2 +- .../webextensions/api/extension/lasterror/index.md | 2 +- .../webextensions/api/extension/onrequest/index.md | 2 +- .../api/extension/onrequestexternal/index.md | 2 +- .../api/extension/setupdateurldata/index.md | 2 +- .../webextensions/api/extension/viewtype/index.md | 2 +- .../api/extensiontypes/imagedetails/index.md | 2 +- .../api/extensiontypes/imageformat/index.md | 2 +- .../webextensions/api/extensiontypes/index.md | 2 +- .../api/extensiontypes/runat/index.md | 2 +- .../add-ons/webextensions/api/history/index.md | 4 +--- .../add-ons/webextensions/api/i18n/index.md | 4 +--- .../add-ons/webextensions/api/idle/index.md | 4 +--- .../add-ons/webextensions/api/menus/index.md | 2 +- .../api/runtime/connectnative/index.md | 4 +--- .../webextensions/api/runtime/getmanifest/index.md | 4 +--- .../add-ons/webextensions/api/runtime/index.md | 4 +--- .../webextensions/api/runtime/onconnect/index.md | 4 +--- .../api/runtime/openoptionspage/index.md | 4 +--- .../api/runtime/platformarch/index.md | 4 +--- .../webextensions/api/runtime/platformos/index.md | 4 +--- .../webextensions/api/runtime/sendmessage/index.md | 2 +- .../api/runtime/sendnativemessage/index.md | 4 +--- .../webextensions/api/sessions/session/index.md | 4 +--- .../add-ons/webextensions/api/storage/index.md | 4 +--- .../webextensions/api/tabs/capturetab/index.md | 2 +- .../api/tabs/capturevisibletab/index.md | 2 +- .../webextensions/api/tabs/connect/index.md | 2 +- .../add-ons/webextensions/api/tabs/create/index.md | 2 +- .../webextensions/api/tabs/detectlanguage/index.md | 2 +- .../webextensions/api/tabs/discard/index.md | 2 +- .../webextensions/api/tabs/duplicate/index.md | 2 +- .../webextensions/api/tabs/executescript/index.md | 2 +- .../add-ons/webextensions/api/tabs/get/index.md | 2 +- .../webextensions/api/tabs/getallinwindow/index.md | 2 +- .../webextensions/api/tabs/getcurrent/index.md | 2 +- .../webextensions/api/tabs/getselected/index.md | 2 +- .../webextensions/api/tabs/getzoom/index.md | 2 +- .../api/tabs/getzoomsettings/index.md | 2 +- .../add-ons/webextensions/api/tabs/goback/index.md | 2 +- .../webextensions/api/tabs/goforward/index.md | 2 +- .../webextensions/api/tabs/highlight/index.md | 2 +- .../add-ons/webextensions/api/tabs/index.md | 2 +- .../webextensions/api/tabs/insertcss/index.md | 2 +- .../add-ons/webextensions/api/tabs/move/index.md | 2 +- .../webextensions/api/tabs/mutedinfo/index.md | 2 +- .../api/tabs/mutedinforeason/index.md | 2 +- .../webextensions/api/tabs/onactivated/index.md | 2 +- .../api/tabs/onactivechanged/index.md | 2 +- .../webextensions/api/tabs/onattached/index.md | 2 +- .../webextensions/api/tabs/oncreated/index.md | 2 +- .../webextensions/api/tabs/ondetached/index.md | 2 +- .../api/tabs/onhighlightchanged/index.md | 2 +- .../webextensions/api/tabs/onhighlighted/index.md | 2 +- .../webextensions/api/tabs/onmoved/index.md | 2 +- .../webextensions/api/tabs/onremoved/index.md | 2 +- .../webextensions/api/tabs/onreplaced/index.md | 2 +- .../api/tabs/onselectionchanged/index.md | 2 +- .../webextensions/api/tabs/onupdated/index.md | 2 +- .../webextensions/api/tabs/onzoomchange/index.md | 2 +- .../add-ons/webextensions/api/tabs/query/index.md | 2 +- .../add-ons/webextensions/api/tabs/reload/index.md | 2 +- .../add-ons/webextensions/api/tabs/remove/index.md | 2 +- .../webextensions/api/tabs/removecss/index.md | 2 +- .../webextensions/api/tabs/sendmessage/index.md | 2 +- .../webextensions/api/tabs/sendrequest/index.md | 2 +- .../webextensions/api/tabs/setzoom/index.md | 2 +- .../api/tabs/setzoomsettings/index.md | 2 +- .../add-ons/webextensions/api/tabs/tab/index.md | 2 +- .../webextensions/api/tabs/tab_id_none/index.md | 2 +- .../webextensions/api/tabs/tabstatus/index.md | 2 +- .../add-ons/webextensions/api/tabs/update/index.md | 2 +- .../webextensions/api/tabs/windowtype/index.md | 2 +- .../webextensions/api/tabs/zoomsettings/index.md | 2 +- .../api/tabs/zoomsettingsmode/index.md | 2 +- .../api/tabs/zoomsettingsscope/index.md | 2 +- .../api/types/browsersetting/index.md | 4 ++-- .../add-ons/webextensions/api/types/index.md | 2 +- .../api/webnavigation/ondomcontentloaded/index.md | 2 +- .../api/webrequest/requestfilter/index.md | 4 +--- .../webextensions/api/windows/create/index.md | 4 +--- .../add-ons/webextensions/api/windows/index.md | 2 +- .../webextensions/api/windows/windowstate/index.md | 4 +--- .../webextensions/api/windows/windowtype/index.md | 4 +--- .../chrome_incompatibilities/index.md | 14 +++++++------- files/zh-cn/mozilla/add-ons/webextensions/index.md | 2 +- .../webextensions/manifest.json/version/index.md | 2 +- .../webextensions/what_are_webextensions/index.md | 2 +- .../information_for_web_authors/index.md | 2 +- files/zh-cn/web/api/abortcontroller/index.md | 2 +- files/zh-cn/web/api/background_fetch_api/index.md | 2 +- .../api/background_synchronization_api/index.md | 2 +- files/zh-cn/web/api/badging_api/index.md | 2 +- files/zh-cn/web/api/barcode_detection_api/index.md | 2 +- files/zh-cn/web/api/barcodedetector/index.md | 2 +- files/zh-cn/web/api/console/assert_static/index.md | 2 +- files/zh-cn/web/api/console/index.md | 2 +- files/zh-cn/web/api/console/time_static/index.md | 2 +- .../getasfilesystemhandle/index.md | 2 +- .../web/api/document/startviewtransition/index.md | 2 +- .../api/document/visibilitychange_event/index.md | 2 +- files/zh-cn/web/api/document/write/index.md | 2 +- files/zh-cn/web/api/element/setattribute/index.md | 2 +- files/zh-cn/web/api/eyedropper_api/index.md | 2 +- files/zh-cn/web/api/file_system_api/index.md | 4 ++-- .../api/filesystemdirectoryhandle/entries/index.md | 2 +- .../getdirectoryhandle/index.md | 2 +- .../getfilehandle/index.md | 2 +- .../web/api/filesystemdirectoryhandle/index.md | 2 +- .../api/filesystemdirectoryhandle/keys/index.md | 2 +- .../filesystemdirectoryhandle/removeentry/index.md | 2 +- .../api/filesystemdirectoryhandle/resolve/index.md | 2 +- .../api/filesystemdirectoryhandle/values/index.md | 2 +- .../createsyncaccesshandle/index.md | 2 +- .../filesystemfilehandle/createwritable/index.md | 2 +- .../web/api/filesystemfilehandle/getfile/index.md | 2 +- files/zh-cn/web/api/filesystemfilehandle/index.md | 2 +- files/zh-cn/web/api/filesystemhandle/index.md | 2 +- .../web/api/filesystemhandle/issameentry/index.md | 2 +- files/zh-cn/web/api/filesystemhandle/kind/index.md | 2 +- files/zh-cn/web/api/filesystemhandle/name/index.md | 2 +- .../api/filesystemhandle/querypermission/index.md | 2 +- .../filesystemhandle/requestpermission/index.md | 2 +- .../api/filesystemsyncaccesshandle/close/index.md | 2 +- .../api/filesystemsyncaccesshandle/flush/index.md | 2 +- .../filesystemsyncaccesshandle/getsize/index.md | 2 +- .../web/api/filesystemsyncaccesshandle/index.md | 2 +- .../api/filesystemsyncaccesshandle/read/index.md | 2 +- .../filesystemsyncaccesshandle/truncate/index.md | 2 +- .../api/filesystemsyncaccesshandle/write/index.md | 2 +- .../web/api/filesystemwritablefilestream/index.md | 2 +- .../api/filesystemwritablefilestream/seek/index.md | 2 +- .../filesystemwritablefilestream/truncate/index.md | 2 +- .../filesystemwritablefilestream/write/index.md | 2 +- files/zh-cn/web/api/fontdata/blob/index.md | 2 +- files/zh-cn/web/api/fontdata/family/index.md | 2 +- files/zh-cn/web/api/fontdata/fullname/index.md | 2 +- files/zh-cn/web/api/fontdata/index.md | 2 +- .../zh-cn/web/api/fontdata/postscriptname/index.md | 2 +- files/zh-cn/web/api/fontdata/style/index.md | 2 +- files/zh-cn/web/api/local_font_access_api/index.md | 4 ++-- .../zh-cn/web/api/navigator/clearappbadge/index.md | 2 +- files/zh-cn/web/api/navigator/contacts/index.md | 2 +- files/zh-cn/web/api/navigator/index.md | 2 +- files/zh-cn/web/api/navigator/scheduling/index.md | 2 +- files/zh-cn/web/api/navigator/serial/index.md | 2 +- files/zh-cn/web/api/navigator/setappbadge/index.md | 2 +- .../zh-cn/web/api/navigator/useragentdata/index.md | 2 +- files/zh-cn/web/api/navigator/wakelock/index.md | 2 +- files/zh-cn/web/api/navigatoruadata/index.md | 2 +- files/zh-cn/web/api/reporting_api/index.md | 2 +- .../serviceworkerglobalscope/sync_event/index.md | 2 +- .../zh-cn/web/api/subtlecrypto/exportkey/index.md | 4 ++-- .../zh-cn/web/api/urlsearchparams/append/index.md | 2 +- files/zh-cn/web/api/urlsearchparams/index.md | 2 +- .../web/api/urlsearchparams/tostring/index.md | 2 +- .../web/api/user-agent_client_hints_api/index.md | 2 +- files/zh-cn/web/api/view_transitions_api/index.md | 6 +++--- .../zh-cn/web/api/viewtransition/finished/index.md | 2 +- files/zh-cn/web/api/viewtransition/index.md | 2 +- files/zh-cn/web/api/viewtransition/ready/index.md | 2 +- .../web/api/viewtransition/skiptransition/index.md | 2 +- .../api/viewtransition/updatecallbackdone/index.md | 4 ++-- .../web/api/virtualkeyboard/boundingrect/index.md | 2 +- .../virtualkeyboard/geometrychange_event/index.md | 2 +- files/zh-cn/web/api/virtualkeyboard/hide/index.md | 2 +- files/zh-cn/web/api/virtualkeyboard/index.md | 2 +- .../api/virtualkeyboard/overlayscontent/index.md | 2 +- files/zh-cn/web/api/virtualkeyboard/show/index.md | 2 +- files/zh-cn/web/api/virtualkeyboard_api/index.md | 2 +- files/zh-cn/web/api/wakelock/index.md | 2 +- files/zh-cn/web/api/wakelock/request/index.md | 2 +- .../web_workers_api/transferable_objects/index.md | 2 +- .../api/web_workers_api/using_web_workers/index.md | 2 +- files/zh-cn/web/api/webcodecs_api/index.md | 4 ++-- files/zh-cn/web/api/webusb_api/index.md | 2 +- files/zh-cn/web/api/window/navigation/index.md | 2 +- files/zh-cn/web/api/window/pagehide_event/index.md | 4 ++-- .../zh-cn/web/api/window/querylocalfonts/index.md | 2 +- .../web/api/window/showdirectorypicker/index.md | 2 +- .../web/api/window/showopenfilepicker/index.md | 2 +- .../web/api/window/showsavefilepicker/index.md | 2 +- .../web/api/workernavigator/clearappbadge/index.md | 2 +- .../web/api/workernavigator/setappbadge/index.md | 2 +- .../web/api/workernavigator/useragentdata/index.md | 2 +- .../_doublecolon_view-transition-group/index.md | 2 +- .../index.md | 2 +- .../css/_doublecolon_view-transition-new/index.md | 2 +- .../css/_doublecolon_view-transition-old/index.md | 2 +- .../web/css/_doublecolon_view-transition/index.md | 2 +- files/zh-cn/web/css/color-scheme/index.md | 2 +- files/zh-cn/web/css/overscroll-behavior-y/index.md | 2 +- files/zh-cn/web/css/view-transition-name/index.md | 2 +- .../zh-cn/web/html/attributes/rel/preload/index.md | 2 +- files/zh-cn/web/html/viewport_meta_tag/index.md | 2 +- files/zh-cn/web/http/client_hints/index.md | 2 +- .../zh-cn/web/http/headers/device-memory/index.md | 2 +- files/zh-cn/web/http/headers/dpr/index.md | 2 +- .../zh-cn/web/http/headers/sec-ch-ua-arch/index.md | 2 +- .../web/http/headers/sec-ch-ua-bitness/index.md | 2 +- .../headers/sec-ch-ua-full-version-list/index.md | 2 +- .../http/headers/sec-ch-ua-full-version/index.md | 2 +- files/zh-cn/web/http/headers/sec-ch-ua/index.md | 2 +- files/zh-cn/web/http/permissions_policy/index.md | 2 +- files/zh-cn/web/index.md | 2 +- .../inheritance_and_the_prototype_chain/index.md | 4 ++-- .../reference/errors/already_has_pragma/index.md | 2 +- .../global_objects/sharedarraybuffer/index.md | 2 +- files/zh-cn/web/media/autoplay_guide/index.md | 2 +- .../privacy_sandbox/partitioned_cookies/index.md | 2 +- .../progressive_web_apps/guides/caching/index.md | 2 +- .../offline_and_background_operation/index.md | 6 +++--- files/zh-cn/web/tutorials/index.md | 2 +- 336 files changed, 366 insertions(+), 393 deletions(-) diff --git a/files/zh-cn/.markdownlint.jsonc b/files/zh-cn/.markdownlint.jsonc index 6ef149968c88f4..6af1da01b2dc36 100644 --- a/files/zh-cn/.markdownlint.jsonc +++ b/files/zh-cn/.markdownlint.jsonc @@ -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", diff --git a/files/zh-cn/glossary/accessibility/index.md b/files/zh-cn/glossary/accessibility/index.md index fea9ccfa921fa8..0e9747e70bc518 100644 --- a/files/zh-cn/glossary/accessibility/index.md +++ b/files/zh-cn/glossary/accessibility/index.md @@ -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 无障碍技术。 diff --git a/files/zh-cn/glossary/developer_tools/index.md b/files/zh-cn/glossary/developer_tools/index.md index e545c5d1760f94..c10101131c6976 100644 --- a/files/zh-cn/glossary/developer_tools/index.md +++ b/files/zh-cn/glossary/developer_tools/index.md @@ -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/) diff --git a/files/zh-cn/glossary/first_cpu_idle/index.md b/files/zh-cn/glossary/first_cpu_idle/index.md index abd4c5644efe75..c3f7ae6fdf3be2 100644 --- a/files/zh-cn/glossary/first_cpu_idle/index.md +++ b/files/zh-cn/glossary/first_cpu_idle/index.md @@ -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) diff --git a/files/zh-cn/glossary/synthetic_monitoring/index.md b/files/zh-cn/glossary/synthetic_monitoring/index.md index bfcc6cef876bea..ec4e92704f532d 100644 --- a/files/zh-cn/glossary/synthetic_monitoring/index.md +++ b/files/zh-cn/glossary/synthetic_monitoring/index.md @@ -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）不同，模拟监控提供了一个狭窄的性能视图，不考虑用户差异，使其在获取应用程序性能的基本数据和在开发环境中进行性能抽查方面非常有用。结合其他工具，如网络限制，可以提供对潜在问题区域的极好见解。 diff --git a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index 339770d8c78086..976e7b93cff377 100644 --- a/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/zh-cn/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -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 调试器 @@ -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) ## 参见 diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md index a59523ed1719f5..f21abea1d913df 100644 --- a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -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) 属性引用的图像文件。 diff --git a/files/zh-cn/learn/performance/measuring_performance/index.md b/files/zh-cn/learn/performance/measuring_performance/index.md index 577b1feff3a0a6..92f2e66ccffeec 100644 --- a/files/zh-cn/learn/performance/measuring_performance/index.md +++ b/files/zh-cn/learn/performance/measuring_performance/index.md @@ -63,7 +63,7 @@ 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) ## 性能监视工具 @@ -71,7 +71,7 @@ slug: Learn/Performance/Measuring_performance ![开发者工具性能面板显示录制 #1. 的瀑布图](perf-monitor.png) -另见 [Chrome 性能工具文档](https://developer.chrome.com/docs/devtools/performance/)。 +另见 [Chrome 性能工具文档](https://developer.chrome.google.cn/docs/devtools/performance)。 ## 性能 API diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md index 630dfa943cbdc6..0406405256b7c8 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/javascript/index.md @@ -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 中，调试器标签页大致如图所示： diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md index 430151a8e66467..a31082abc54c55 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md @@ -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)）。 然而，通常情况下，你需要安装某种模拟器。你可能需要测试的常见设备/浏览器如下： diff --git a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md index f03b88f002dc5b..f8aeb2e2041d71 100644 --- a/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md +++ b/files/zh-cn/learn/tools_and_testing/understanding_client-side_tools/deployment/index.md @@ -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")}} diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/action/colorarray/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/action/colorarray/index.md index 25cefb07b9d56d..1f7923e0b7cc95 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/action/colorarray/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/action/colorarray/index.md @@ -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)。 From 7bf48710e6c18198e6337e22cd3c7738b4d4cafc Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Tue, 24 Sep 2024 09:49:16 +0800 Subject: [PATCH 032/218] [zh-cn]: create the translation of `documentpictureinpictureevent` (#23699) Co-authored-by: A1lo --- .../documentpictureinpictureevent/index.md | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 files/zh-cn/web/api/documentpictureinpictureevent/index.md diff --git a/files/zh-cn/web/api/documentpictureinpictureevent/index.md b/files/zh-cn/web/api/documentpictureinpictureevent/index.md new file mode 100644 index 00000000000000..d3246906c00900 --- /dev/null +++ b/files/zh-cn/web/api/documentpictureinpictureevent/index.md @@ -0,0 +1,65 @@ +--- +title: DocumentPictureInPictureEvent +slug: Web/API/DocumentPictureInPictureEvent +l10n: + sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e +--- + +{{APIRef("Document Picture-in-Picture API")}}{{SeeCompatTable}}{{SecureContext_Header}} + +**`DocumentPictureInPictureEvent`** 接口是 {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 的 {{domxref("DocumentPictureInPicture/enter_event", "enter")}} 事件（会在画中画窗口打开时触发）的对象。 + +{{InheritanceDiagram}} + +## 构造函数 + +- {{domxref("DocumentPictureInPictureEvent.DocumentPictureInPictureEvent", "DocumentPictureInPictureEvent()")}} {{Experimental_Inline}} + - : 创建一个新的 `DocumentPictureInPictureEvent` 对象实例。 + +## 实例方法 + +_继承其父接口 {{DOMxRef("Event")}} 的方法。_ + +## 实例属性 + +_继承其父接口 {{DOMxRef("Event")}} 的属性。_ + +- {{domxref("DocumentPictureInPictureEvent.window", "window")}} {{ReadOnlyInline}} {{Experimental_Inline}} + - : 返回一个 {{domxref("Window")}} 实例，表示触发事件的 `DocumentPictureInPicture` 窗口的浏览上下文。 + +## 示例 + +```js +documentPictureInPicture.addEventListener("enter", (event) => { + const pipWindow = event.window; + console.log("视频播放器已进入画中画窗口"); + + const pipMuteButton = pipWindow.document.createElement("button"); + pipMuteButton.textContent = "静音"; + pipMuteButton.addEventListener("click", () => { + const pipVideo = pipWindow.document.querySelector("#video"); + if (!pipVideo.muted) { + pipVideo.muted = true; + pipMuteButton.textContent = "取消静音"; + } else { + pipVideo.muted = false; + pipMuteButton.textContent = "静音"; + } + }); + + pipWindow.document.body.append(pipMuteButton); +}); +``` + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} +- [使用 Document Picture-in-Picture API](/zh-CN/docs/Web/API/Document_Picture-in-Picture_API/Using) From 0ee3e0e85118a3daa904e61219b4f728a63e972b Mon Sep 17 00:00:00 2001 From: hanyujie2002 Date: Tue, 24 Sep 2024 10:08:14 +0800 Subject: [PATCH 033/218] zh-cn: revise translation of 'your own automation environment' (#23679) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../your_own_automation_environment/index.md | 566 ++++++++++-------- 1 file changed, 326 insertions(+), 240 deletions(-) diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md index 5664f52bfeae4f..1f83988be50461 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md @@ -1,11 +1,13 @@ --- -title: 建立自己的自动化测试环境 +title: 搭建自己的自动化测试环境 slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment +l10n: + sourceCommit: d71da812ee94c20658cb1916a123a42254ea545c --- {{LearnSidebar}}{{PreviousMenu("Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}} -在这篇文章中，我们将教会你如何安装自己的自动化测试环境，并使用 Selenium/WebDriver 和一种测试库（如 selenium-webdriver for Node）运行自己的测试。我们还将着眼于如何将本地测试环境与上一篇文章中讨论的商业工具集成在一起。 +在本文中，我们将教你如何搭建自己的自动化测试环境，并使用 Selenium/WebDriver 以及一种测试库（如 selenium-webdriver for Node）来运行测试。我们还将探讨如何将本地测试环境与上一篇文章中提到的商业工具集成。 @@ -18,13 +20,13 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm >和自动化测试的理解。 + >有基本理解。 @@ -32,37 +34,37 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm ## Selenium -[Selenium](https://www.selenium.dev/) 是最流行的浏览器自动化测试工具。最易使用的方法是使用基于 Selenium 的 WebDriver API，它通过调用浏览器接口实现自动化，执行诸如“打开网页”、“移动网页上的元素”、“点击链接”、“查看链接是否打开 URL”等。对于运行自动化测试来说是一个十分理想的方法。 +[Selenium](https://www.selenium.dev/) 是最流行的浏览器自动化测试工具。使用 Selenium 有很多种方式，但最佳方式是通过其强大的 WebDriver API，它建立在 Selenium 的基础上，通过调用浏览器接口实现自动化，执行诸如“打开网页”、“移动网页上的元素”、“点击链接”、“查看链接是否打开 URL”等操作。这是运行自动化测试的理想选择。 -安装和使用 WebDriver 的方式取决于你的编程环境。常见的环境都提供有安装 WebDriver 的包或框架，并且支持与 WebDriver 通信的多语言绑定，如 Java、C#、Ruby、Python、JavaScript（Node）等。查看[建立一个 Selenium-WebDriver 的工程](https://www.selenium.dev/zh-cn/documentation/webdriver/getting_started/)来了解 Selenium 在不同语言下建立的更多细节。 +安装和使用 WebDriver 的方式取决于你的编程环境。常见的环境都提供安装 WebDriver 的包或框架，并且支持与 WebDriver 通信的多语言绑定，如 Java、C#、Ruby、Python、JavaScript（Node）等。查看[建立一个 Selenium-WebDriver 的工程](https://www.selenium.dev/zh-cn/documentation/webdriver/getting_started/)以了解 Selenium 在不同语言下的具体配置。 -不同的浏览器需要使用不同的驱动，来使 WebDriver 能够与浏览器交互并控制浏览器。查看[支持 Selenium 的平台](https://www.selenium.dev/downloads/)来了解获取浏览器驱动的信息。 +不同的浏览器需要使用不同的驱动程序，使 WebDriver 能够与浏览器交互并控制它们。查看[支持 Selenium 的平台](https://www.selenium.dev/downloads/)以获取浏览器驱动程序的信息。 -我们将使用 Node.js 来编写和运行 Selenium 测试用例。Node.js 是一个前端开发者都很熟悉，并且容易上手的开发环境。 +我们将使用 Node.js 来编写和运行 Selenium 测试用例。Node.js 是一个前端开发者熟悉且易于上手的开发环境。 > [!NOTE] > 如果你需要了解在其他服务器端环境下使用 WebDriver 的方式，也可以点击[支持 Selenium 的平台](https://www.selenium.dev/downloads/)来获取更多有用的链接。 -### 在 Node 下建立 Selenium +### 在 Node 下搭建 Selenium 环境 -1. 参考上一个章节[创建 Node 和 npm](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Setting_up_Node_and_npm) 创建一个新的 npm 工程，取一个不同的名字，如 `selenium-test`。 -2. 接下来，我们需要安装一个框架来允许我们从 Node 中运行 Selenium。我们选择 selenium 官方提供的 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)，它的文档更新得很好，维护得也很好。如果你想要其他的选择，[webdriver.io](http://webdriver.io/) 和 [nightwatch.js](http://nightwatchjs.org/) 也都不错。要安装 selenium-webdriver，在你的工程目录下运行如下命令： +1. 参考上一个章节[配置 Node 和 npm 环境](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#配置_Node_和_npm_环境)，创建一个新的 npm 工程，并取一个不同的名字，如 `selenium-test`。 +2. 接下来，我们需要安装一个框架从而能够在 Node 中运行 Selenium。我们选择 Selenium 官方提供的 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)，它的文档更新及时，维护良好。如果你想要其他选择，[webdriver.io](https://webdriver.io/) 和 [nightwatch.js](https://nightwatchjs.org/) 也都是不错的选择。要安装 selenium-webdriver，在你的工程目录下运行以下命令： ```bash npm install selenium-webdriver ``` > [!NOTE] -> 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，确保所有东西都是最新的。 +> 即使你已经安装过 selenium-webdriver 并下载了浏览器驱动，我们仍然建议你按照步骤再来一遍，以确保所有内容都是最新的。 -接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver)（第一部分的表格）页面查看如何下载。显然，有些浏览器是操作系统特定的，我们将坚持使用 Firefox 和 Chrome，因为它们可以在所有主要的操作系统上使用。 +接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) 页面（参见第一部分的表格）查看如何下载。显然，有些浏览器是操作系统特定的，我们将坚持使用 Firefox 和 Chrome，因为它们可以在所有主要的操作系统上使用。 -1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（为 Firefox 使用）和 [ChromeDriver](http://chromedriver.storage.googleapis.com/index.html) 驱动。 -2. 将它们解压到相当容易浏览的地方，比如你的主用户目录的根部。 -3. 把 `chromedriver` 和 `geckodriver` 驱动的目录添加到你的系统 `PATH` 变量，这应该是从你的硬盘根目录开始的一个绝对路径。举个例子，如果我们使用的是一个 macOS 机器，用户名为 bob, 我们把驱动放到了用户的根目录下，那这个路径就是 `/Users/bob`。 +1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（用于 Firefox）和 [ChromeDriver](https://developer.chrome.com/docs/chromedriver/downloads?hl=zh-cn) 驱动。 +2. 将它们解压到一个容易访问的地方，比如你的主用户目录的根目录。 +3. 将 `chromedriver` 和 `geckodriver` 驱动的目录添加到你的系统 `PATH` 变量中，这应该是从你的硬盘根目录开始的一个绝对路径。举个例子，如果我们使用的是 macOS 机器，用户名为 bob，并且将驱动放在用户的根目录下，那么路径就是 `/Users/bob`。 > [!NOTE] -> 重申一下，添加到 `PATH` 的路径是到包含驱动的那一级目录，而不是驱动目录自身！这是一个常犯的错误。 +> 重申一下，添加到 `PATH` 的路径是到包含驱动的目录，而不是驱动自身！这是一个常见的错误。 在 macOS 或大多数 Linux 系统中设置 `PATH` 变量的操作如下： @@ -81,8 +83,8 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm export PATH=$PATH:/Users/bob ``` -4. 保存并关闭文件，然后重启命令终端以生效 Bash 的配置。 -5. 在命令终端上敲下面命令，查看新的路径是否已经添加到 `PATH` 变量中： +4. 保存并关闭文件，然后重启命令终端以使 Bash 的配置生效。 +5. 在命令终端上输入以下命令，查看新的路径是否已经添加到 `PATH` 变量中： ```bash echo $PATH @@ -95,139 +97,121 @@ slug: Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environm OK，现在我们来做一个快速的测试来验证一下一切是否正常。 1. 在你的工程目录下创建一个新的文件 `google_test.js`： -2. 将下面代码复制到文件中保存： +2. 将以下内容复制到上述文件中，然后保存： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; - - const driver = new webdriver.Builder().forBrowser("firefox").build(); - - driver.get("http://www.google.com"); - - driver.findElement(By.name("q")).sendKeys("webdriver"); - - driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); - }); - - driver.findElement(By.name("btnK")).click(); - - driver.sleep(2000).then(() => { - driver.getTitle().then((title) => { - if (title === "webdriver - Google Search") { - console.log("Test passed"); - } else { - console.log("Test failed"); - } - driver.quit(); - }); - }); + const { Builder, Browser, By, Key, until } = require("selenium-webdriver"); + + (async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + try { + await driver.get("https://www.google.com/ncr"); + await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); + await driver.wait(until.titleIs("webdriver - Google Search"), 1000); + } finally { + await driver.sleep(2000); // 延迟足够长的时间以看到搜索页面！ + await driver.quit(); + } + })(); ``` -3. 在终端上，确保在你的工程目录下输入如下命令： + > [!NOTE] + > 此函数是一个 {{glossary("IIFE")}}（立即调用函数表达式）。 + +3. 在终端上，确保在你的项目目录下输入如下命令： ```bash node google_test ``` -你会看到 Firefox 自动打开了一个窗口！Google 自动加载到标签页中，“webdriver”被输入到搜索框，然后搜索按钮被点击。然后，WebDriver 等待 2 秒，然后获取文本标题，如果标题是“webdriver - Google Search”, 将返回测试成功的消息。然后 WebDriver 关闭 Firefox 窗口并结束。 +你会看到 Firefox 自动打开一个窗口！Google 会自动加载到标签页中，并在搜索框中输入“webdriver”，然后点击搜索按钮。接着，WebDriver 会等待 1 秒钟，然后获取页面标题。如果标题是“webdriver - Google Search”，我们将返回一条消息，表示测试通过。然后我们再等待四秒钟，之后 WebDriver 会关闭 Firefox 窗口并停止。 ## 一次测试多个浏览器 -接下来，让我们来试一下同时在多个浏览器上进行测试。这也是你经常碰到的情况！ +接下来，让我们来试一下同时在多个浏览器上进行测试。 -1. 在你的工程目录下创建另外一个新文件 `google_test_multiple.js`。你可以根据实际需要测试的浏览器情况，对我们添加的浏览器进行修改或删除等操作。但确保系统安装了正确的浏览器驱动。关于如何填写 `.forBrowser()` 方法中对浏览器描述的字符串，请参考 [Browser enum](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Browser.html)。 +1. 在你的工程目录下创建另外一个新文件 `google_test_multiple.js`。你可以根据实际需要测试的浏览器情况，对我们添加的浏览器进行修改或删除等操作。但确保系统安装了正确的浏览器驱动。关于如何填写 `.forBrowser()` 方法中对浏览器描述的字符串，请参考 [Browser 枚举值](https://www.selenium.dev/selenium/docs/api/javascript/global.html#Browser)页面。 2. 将下面代码复制到文件中保存： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; - - let driver_fx = new webdriver.Builder().forBrowser("firefox").build(); - - let driver_chr = new webdriver.Builder().forBrowser("chrome").build(); + const { Builder, Browser, By, Key } = require("selenium-webdriver"); + + const driver_fx = new Builder().forBrowser(Browser.FIREFOX).build(); + + const driver_chr = new Builder().forBrowser(Browser.CHROME).build(); + + async function searchTest(driver) { + try { + await driver.get("http://www.google.com"); + await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); + await driver.sleep(2000).then(async () => { + await driver.getTitle().then(async (title) => { + if (title === "webdriver - Google Search") { + console.log("Test passed"); + } else { + console.log("Test failed"); + } + }); + }); + } finally { + driver.quit(); + } + } searchTest(driver_fx); searchTest(driver_chr); - - function searchTest(driver) { - driver.get("http://www.google.com"); - driver.findElement(By.name("q")).sendKeys("webdriver"); - - driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); - }); - - driver.findElement(By.name("btnK")).click(); - - driver.sleep(2000).then(() => { - driver.getTitle().then((title) => { - if (title === "webdriver - Google Search") { - console.log("Test passed"); - } else { - console.log("Test failed"); - } - driver.quit(); - }); - }); - } ``` -3. 在终端上，确保在你的工程目录下输入如下命令： +3. 在终端上，确保在你的项目目录下输入如下命令： ```bash node google_test_multiple ``` -4. 如果你用的是 Mac，并决定测试 Safari 浏览器，可能会产生一个错误信息：“Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver.”如果是这样，根据指示重新尝试一遍。 +4. 如果你用的是 Mac，并决定测试 Safari 浏览器，可能会产生一个错误信息：“Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver.”（无法创建会话：你必须启用 Safari 的“开发”菜单中的“允许远程自动化”选项，才能通过 WebDriver 控制 Safari）。如果是这样，请根据指示操作并重新尝试一遍。 -现在，我们像上次一样完成了测试，这一次浏览器的测试代码放到了 `searchTest()` 函数中。我们对多个浏览器创建了新的浏览器实例，然后将每一个实例传递给函数，这样就可以在 3 个浏览器下执行测试！ +现在，我们像上次一样完成了测试，这一次浏览器的测试代码放到了 `searchTest()` 函数中。我们对多个浏览器创建了新的浏览器实例，然后将每一个实例传递给函数，这样就可以在全部 3 个浏览器下执行测试！ 有意思吧？接下来我们继续，来了解一下 WebDriver 的语法基础。 ## WebDriver 语法速成课程 -现在我们来看一下 webdriver 的一些关键语法。更完整的细节，可以参考 [selenium-webdriver JavaScript API 参考](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/)以及 Selenium 主要的文档 [Selenium WebDriver](https://www.selenium.dev/documentation/webdriver/)，里面有用不同语言编写的丰富的学习示例。 +现在我们来看一下 webdriver 的一些关键语法。更完整的细节，可以参考 [selenium-webdriver JavaScript API 参考](https://www.selenium.dev/selenium/docs/api/javascript/)以及 Selenium 主要的文档 [Selenium WebDriver](https://www.selenium.dev/zh-cn/documentation/webdriver/)，里面有用不同语言编写的丰富的学习示例。 -### 启动一个新的测试 +### 启动新的测试 -要启动一次新的测试，你需要包含如下的 `selenium-webdriver` 代码模块： +要启动一个新的测试，你需要包含 `selenium-webdriver` 模块，并导入 `Builder` 构造函数和 `Browser` 接口： ```js -const webdriver = require("selenium-webdriver"); -const By = webdriver.By; -const until = webdriver.until; +const { Builder, Browser } = require("selenium-webdriver"); ``` -接下来，通过 `new webdriver.Builder()` 构造器来创建一个新的驱动实例，通过 `forBrowser()` 方法指定测试的浏览器类型，最后调用 `build()` 来实际创建它。（关于这些功能的详细信息，请参见 [Builder 类参考资料](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_Builder.html)）。 +你可以使用 `Builder()` 构造函数创建一个新的驱动实例，并链式调用 `forBrowser()` 方法来指定你希望使用的浏览器。`build()` 方法在链式调用的末尾用于实际构建驱动实例（有关这些功能的详细信息，请参阅 [Builder 类参考](https://www.selenium.dev/selenium/docs/api/javascript/Builder.html)）。 ```js -let driver = new webdriver.Builder().forBrowser("firefox").build(); +let driver = new Builder().forBrowser(Browser.FIREFOX).build(); ``` -注意，可以为要测试的浏览器设置特定的配置选项，例如，你可以在 `forBrowser()` 方法中设置一个特定的版本和操作系统来测试： +请注意，你可以为要测试的浏览器设置特定的配置选项。例如，你可以在 `forBrowser()` 方法中设置特定的版本和操作系统： ```js -let driver = new webdriver.Builder().forBrowser("firefox", "46", "MAC").build(); +let driver = new Builder().forBrowser(Browser.FIREFOX, "46", "MAC").build(); ``` -你还可以通过设置环境变量的方式来配置这些选项，如： +你也可以使用环境变量来设置这些选项，例如： ```bash SELENIUM_BROWSER=firefox:46:MAC ``` -让我们来创建一个新的测试验证一下。在你的 selenium 测试工程目录下，新建一个文件 `quick_test.js`, 将下面代码复制进去： +让我们创建一个新测试，以便在讨论这些代码时进行探索。在你的 Selenium 测试项目目录中，创建一个名为 `quick_test.js` 的新文件，并添加以下代码： ```js -const webdriver = require("selenium-webdriver"); -const By = webdriver.By; -const until = webdriver.until; +const { Builder, Browser } = require("selenium-webdriver"); -const driver = new webdriver.Builder().forBrowser("firefox").build(); +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); +})(); ``` ### 获取测试的文档 @@ -239,7 +223,7 @@ driver.get("http://www.google.com"); ``` > [!NOTE] -> 可以查看 [WebDriver class reference](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html) 了解这一部分提到内容的详情。 +> 可以查看 [WebDriver 类参考](https://www.selenium.dev/selenium/docs/api/javascript/WebDriver.html)了解这一部分和下面提到的内容的详情。 你可以使用包含 `file://` 的 URL 来指向需要测试的本地文件： @@ -257,88 +241,170 @@ driver.get("http://localhost:8888/fake-div-buttons.html"); 使用一个远程的服务器地址代码会更灵活——当你启用远程服务器运行测试时，如果企图使用本地路径，代码会中断。 -现在添加下面代码到 `quick_test.js` 的最后： +更新 `example()` 函数如下： ```js -driver.get( - "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", -); +const { Builder, Browser } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); +})(); ``` ### 同文档交互 -得到测试的文档后，我们就需要同它进行交互操作了，比如获取特定的元素对它进行某种测试。WebDriver 提供了[通过多种方法选择 UI 元素](https://www.selenium.dev/zh-cn/documentation/webdriver/elements/)，比如通过 ID、class、元素名称等。具体的选择通过 `findElement()` 方法完成，只需要将选择的元素作为参数传给它即可。举例来说，通过 ID 选择一个元素： +得到测试的文档后，我们就需要同它进行交互操作了，比如获取特定的元素对它进行某种测试。WebDriver 提供了[多种方法来选择 UI 元素](https://www.selenium.dev/zh-cn/documentation/webdriver/elements/)，比如通过 ID、class、元素名称等。具体的选择通过 `findElement()` 方法完成，只需要将选择的元素作为参数传给它即可。举例来说，通过 ID 选择元素： ```js const element = driver.findElement(By.id("myElementId")); ``` -通过 CSS 查找一个元素的最常用方法是使用 By.css 方法，它可以通过 CSS 选择器的方式来选择元素。把下面代码敲到 `quick_test.js` 的最后面： +通过 CSS 查找元素的最常用方法是使用 `By.css()` 方法，它可以通过 CSS 选择器的方式来选择元素。 + +现在更新 `example()` 函数如下： ```js -const button = driver.findElement(By.css("button:nth-of-type(1)")); +const { Builder, Browser, By } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + const button = driver.findElement(By.css("button:nth-of-type(1)")); +})(); ``` ### 测试元素 -同 web 文档和元素交互的方式很多。在 WebDriver 的文档中有很多常用的例子，你可以从[获取文本值](https://www.selenium.dev/documentation/webdriver/elements/information/#text-content)开始。 +同 web 文档和元素交互的方式很多。在 WebDriver 的文档中有很多常用的例子，你可以从[获取文本值](https://www.selenium.dev/zh-cn/documentation/webdriver/elements/information/#文本内容)开始。 如果需要获取按钮中的文本，可以这样操作： ```js button.getText().then((text) => { - console.log(`Button text is '${text}'`); + console.log(`按钮中的文本是 '${text}'`); }); ``` -把这段代码也添加到 `quick_test.js` 中。 +如下所示，将此添加到 `example()` 函数的底部： + +```js +const { Builder, Browser, By } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); -在你的工程目录下，运行测试： + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.getText().then((text) => { + console.log(`按钮中的文本是 '${text}'`); + }); +})(); +``` + +在你的项目目录下，运行测试： ```bash node quick_test.js ``` -你可以看到按钮的文本标签打印到控制台。 +你应该可以看到控制台打印出按钮的文本内容。 -现在进一步尝试一下。将上面输入的代码删除，然后添加下面的这行代码： +让我们做点更有用的事情吧。如下所示，用代码 `button.click();` 替换前面的代码： ```js -button.click(); +const { Builder, Browser, By } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); +})(); ``` -重新运行测试；按钮被点击，你会看到 `alert()` 框弹出来，这样就知道按钮是正常工作的。 +重新运行测试；按钮被点击，你会看到 `alert()` 框弹出来，这样就知道按钮是正常工作的了！ -你还可以与弹出框进行交互。将下面代码添加到代码最后，再运行一下测试： +你还可以与弹出框进行交互。更新 `example()` 函数如下，再运行一下测试： ```js -const alert = driver.switchTo().alert(); +const { Builder, Browser, By, until } = require("selenium-webdriver"); -alert.getText().then((text) => { - console.log(`Alert text is '${text}'`); -}); +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); + + await driver.wait(until.alertIsPresent()); + + const alert = driver.switchTo().alert(); -alert.accept(); + alert.getText().then((text) => { + console.log(`提示文本是 '${text}'`); + }); + + alert.accept(); +})(); ``` -接下来，我们试一下在表单的一个元素中输入文本。添加如下代码并运行测试： +接下来，我们试一下在表单元素中输入文本。更新 `example()` 函数如下并运行测试： ```js -const input = driver.findElement(By.id("name")); -input.sendKeys("Filling in my form"); +const { Builder, Browser, By, until } = require("selenium-webdriver"); + +(async function example() { + const driver = await new Builder().forBrowser(Browser.FIREFOX).build(); + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + const input = driver.findElement(By.id("name")); + input.sendKeys("填充表单"); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); + await driver.wait(until.alertIsPresent()); + + const alert = driver.switchTo().alert(); + + alert.getText().then((text) => { + console.log(`提示文本是 '${text}'`); + }); + + alert.accept(); +})(); ``` -你可以提交一些使用常规 `webdriver.Key` 属性不能代表的按键操作。举个例子，下面我们使用指令在提交前将 tab 从 input 移走： +你可以使用 `Key` 对象的属性提交无法用普通字符表示的按键。例如，我们在上面使用了这种代码，以便在提交表单输入之前按下 Tab 键： ```js driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); + driver.findElement(By.name("q")).sendKeys(Key.TAB); }); ``` ### 等待操作完成 -有时候，在进行下一步处理之前我们需要 WebDriver 等待一些操作完成。比如装载一个新的页面，在与页面元素交互之前，需要等待 DOM 完成加载，否则测试有可能会失败。 +有时候，在进行下一步处理之前我们需要 WebDriver 等待一些操作完成。比如加载一个新的页面，在与页面元素交互之前，需要等待 DOM 完成加载，否则测试有可能会失败。 在 `google_test.js` 示例中，有这样一段代码块： @@ -356,40 +422,71 @@ driver.sleep(2000).then(() => { `sleep()` 方法的参数指明需要等待的毫秒时间。该方法返回在时间完成时兑现的 promise，那时将调用 `then()` 内的代码块。在这里的示例中，我们通过 `getTitle()` 方法获得当前页面的标题，然后根据标题的值返回成功或失败的消息。 -添加一个 `sleep()` 方法到我们的 `quick_test.js` 中，将最后的代码修改成如下代码块： +同样添加 `sleep()` 方法到我们的 `quick_test.js` 中，将 `example()` 函数更新如下： ```js -driver.sleep(2000).then(() => { - input.sendKeys("Filling in my form"); - input.getAttribute("value").then((value) => { - if (value !== "") { - console.log("Form input editable"); - } - }); -}); +const { Builder, Browser, By, until } = require("selenium-webdriver"); + +const driver = new Builder().forBrowser("firefox").build(); + +(async function example() { + try { + driver.get( + "https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html", + ); + + driver.sleep(2000).then(() => { + const input = driver.findElement(By.id("name")); + + input.sendKeys("填充表单"); + input.getAttribute("value").then((value) => { + if (value !== "") { + console.log("表单输入可编辑"); + } + }); + }); + + const button = driver.findElement(By.css("button:nth-of-type(1)")); + + button.click(); + + await driver.wait(until.alertIsPresent()); + + const alert = driver.switchTo().alert(); + + alert.getText().then((text) => { + console.log(`提示文本是 '${text}'`); + }); + + alert.accept(); + } finally { + await driver.sleep(4000); // 延迟足够长的时间以看到搜索页面！ + driver.quit(); + } +})(); ``` -WebDriver 等待 2 秒然后填充表单的文本框。接下来我们使用 `getAttribute()` 获取它的 `value` 属性值，并对它进行测试（如是否为空），最后将测试结果打印出来。 +WebDriver 会等待 2 秒然后填充表单的文本框。接下来我们使用 `getAttribute()` 获取它的 `value` 属性值，并对它进行测试（如是否为空），最后将测试结果打印出来。 > [!NOTE] -> 还有一个方法叫 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/webdriver_exports_WebDriver.html#wait), 它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 [util 库](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/lib/until.html)，其中定义了使用 `wait()` 的常见条件。 +> 还有一个方法叫 [`wait()`](https://www.selenium.dev/selenium/docs/api/javascript/WebDriver.html#wait)，它是在一定的时间内对某个条件进行反复测试，然后再继续执行代码，它也使用了 [util 库](https://www.selenium.dev/selenium/docs/api/javascript/lib_until.js.html)，其中定义了使用 `wait()` 的常见条件。 ### 使用后关闭驱动 -完成一次测试后，需要关闭所有打开的驱动实例，确保你的机器上不会出现一堆泛滥的浏览器实例。只需要调用驱动实例的 `quit()` 方法即可。现在将下面这行代码添加到你的 `quick_test.js` 最后： +完成一次测试后，你需要关闭所有已打开的驱动实例，以确保你的机器上不会运行一大堆浏览器实例。只需要调用驱动实例的 `quit()` 方法即可。现在将下面这行代码添加到你的 `quick_test.js` 最后： ```js driver.quit(); ``` -当你运行它时，应该看到测试在执行，并且在测试完成后浏览器实例关闭。这对于不使你的计算机被大量的浏览器实例弄得杂乱无章是很有用的，特别是浏览器实例太多，导致计算机速度减慢。 +运行该程序时，你应该会看到测试正在执行，并且在测试完成后，浏览器实例会自动关闭。这有助于防止计算机因过多的浏览器实例而变得杂乱无章，特别是在浏览器实例过多导致计算机速度减慢的情况下。 ## 测试最佳实践 有很多编写最佳测试的实践方法，你可以参考[测试设计考虑](https://www.selenium.dev/zh-cn/documentation/test_practices/)来了解一些背景。总的来说，测试应该遵循如下几点： 1. 使用好的定位策略：当你[同文档交互](#同文档交互)时，确保你使用的定位器和页面对象是不变的。如对元素进行测试，确保这个元素有固定的 ID 或页面位置，这样可以通过 CSS 选择器定位到它，不至于在下一个迭代就发生变化。尽可能让你的测试稳健，而不是有一点改动就会崩溃。 -2. 写原子测试：一个测试只测一件事，这样有利于跟踪哪一个测试文件执行的是哪种测试。举例来说，前面的`google_test.js` 就只测试了一个简单的用例——页面的搜索结果标题是否正确。我们可以给它改一个名字，这样当我们添加更多的测试文件时它的作用会更直观，比如改为 `results_page_title_set_correctly.js`。 +2. 写原子测试：一个测试只测一件事，这样有利于跟踪哪一个测试文件执行的是哪种测试。举例来说，前面的 `google_test.js` 就只测试了一个简单的用例——页面的搜索结果标题是否正确。我们可以给它改一个名字，比如改为 `results_page_title_set_correctly.js`，这样当我们添加更多的测试文件时它的作用会更直观。 3. 写独立的测试：每一个测试只需要自己执行，不需要依赖其他的测试。 除此之外，我们还要提一下测试结果/测试报告——在前面的例子中，我们只是简单的把测试结果通过 `console.log()` 语句打印出来，这个完全只在 JavaScript 中完成，你可以使用任何你想要的测试运行和报告系统，如 [Mocha](https://mochajs.org/)、[Chai](https://www.chaijs.com/) 或其他的工具。 @@ -409,15 +506,15 @@ driver.quit(); 4. 使用 `--no-timeouts` 参数确保测试不会因 Mocha 的 3 秒超时时限而中途失败退出。 -> **备注：** [saucelabs-sample-test-frameworks](https://github.com/saucelabs-sample-test-frameworks) 中包含了一些关于如何设置不同测试/断言工具组合的有用示例。 +> **备注：** [saucelabs-sample-test-frameworks](https://github.com/saucelabs-sample-test-frameworks) 中包含了一些关于如何配置不同测试/断言工具组合的有用示例。 ## 运行远程测试 -在远端服务器上运行测试并不比在本地执行测试要困难多少，只需要在创建驱动实例的时候多配置几个特征参数，如测试的浏览器类型、服务器地址和用户权限（如果需要）就可以。 +在远端服务器上运行测试并不比在本地执行测试要困难多少，只需要在创建驱动实例的时候多配置几个特征参数，如要测试的浏览器的功能、服务器地址以及访问服务器所需的用户凭据（如果有的话）。 ### LambdaTest -让 Selenium 测试在 LambdaTest 上远程运行是非常简单的。你需要的代码应该遵循下面的模式。 +让 Selenium 测试在 LambdaTest 上远程运行非常简单。你需要的代码应该遵循下面的模式。 我们来写个示例： @@ -425,21 +522,19 @@ driver.quit(); 2. 将下列内容复制到文件中： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; + const { By, Builder } = require("selenium-webdriver"); - // username: Username can be found at automation dashboard + // 用户名：用户名可以在自动化仪表板上找到 const USERNAME = "{username}"; - // AccessKey: AccessKey can be generated from automation dashboard or profile section + // 访问密钥：访问密钥可以从自动化仪表板或个人资料部分生成 const KEY = "{accessKey}"; - // gridUrl: gridUrl can be found at automation dashboard + // 网格 URL：网格 URL 可以在自动化仪表板上找到 const GRID_HOST = "hub.lambdatest.com/wd/hub"; function searchTextOnGoogle() { - // Setup Input capabilities + // 配置功能 const capabilities = { platform: "windows 10", browserName: "chrome", @@ -449,28 +544,32 @@ driver.quit(); visual: true, console: true, video: true, - name: "Test 1", // name of the test - build: "NodeJS build", // name of the build + name: "Test 1", // 测试名称 + build: "NodeJS build", // 构建名称 }; // URL: https://{username}:{accessToken}@hub.lambdatest.com/wd/hub const gridUrl = `https://${USERNAME}:${KEY}@${GRID_HOST}`; - // setup and build selenium driver object - const driver = new webdriver.Builder() + // 设置并构建 Selenium 驱动对象 + const driver = new Builder() .usingServer(gridUrl) .withCapabilities(capabilities) .build(); - // navigate to a URL, search for a text and get title of page + // 导航到 URL，搜索文本并获取页面标题 driver.get("https://www.google.com/ncr").then(function () { driver - .findElement(webdriver.By.name("q")) + .findElement(By.name("q")) .sendKeys("LambdaTest\n") .then(function () { driver.getTitle().then((title) => { setTimeout(() => { - console.log(title); + if (title === "LambdaTest - Google Search") { + driver.executeScript("lambda-status=passed"); + } else { + driver.executeScript("lambda-status=failed"); + } driver.quit(); }, 5000); }); @@ -481,7 +580,8 @@ driver.quit(); searchTextOnGoogle(); ``` -3. 访问你的 [LambdaTest 自动测试仪表板](https://www.lambdatest.com/selenium-automation)，通过点击右上方的 **key** 图标来获取你的 LambdaTest 的用户名和访问密钥（见*Username and Access Keys*）。将代码中的 `{username}` 和 `{accessKey}` 占位符替换为你的实际用户名和访问密钥值（并确保它们是安全的）。 +3. 访问你的 [LambdaTest 自动测试仪表板](https://www.lambdatest.com/selenium-automation)，通过点击右上方的 **key** 图标来获取你的 LambdaTest 的用户名和访问密钥（见 _Username and Access Keys_）。将代码中的 `{username}` 和 `{accessKey}` 占位符替换为你的实际用户名和访问密钥值（并确保它们不泄露）。 + 4. 在终端中运行以下命令，以执行测试： ```bash @@ -491,7 +591,7 @@ driver.quit(); 测试将发送到 LambdaTest，其输出将反馈在 LambdaTest 控制台中。 如果你希望从 LambdaTest 平台提取这些结果用于报告，那么你可以通过使用 [LambdaTest restful API](https://www.lambdatest.com/blog/lambdatest-launches-api-for-selenium-automation/) 来实现。 -5. 现在，如果访问你的 [LambdaTest 自动测试仪表板](https://www.lambdatest.com/selenium-automation)，你会看到你的测试被列出；从这里你可以看到视频、屏幕截图和其他此类数据。 +5. 现在，如果访问你的 [LambdaTest 自动测试仪表板](https://accounts.lambdatest.com/dashboard)，你会看到你的测试被列出；从这里你可以看到视频、屏幕截图和其他此类数据。你还会看到 **passed** 或 **failed** 的状态，而不是 **completed**，因为有 `if` 或 `else` 代码块。 [![LambdaTest 自动测试仪表板](automation-logs-1.jpg)](https://www.lambdatest.com/blog/wp-content/uploads/2019/02/Automation-logs-1.jpg) @@ -503,93 +603,75 @@ driver.quit(); > [!NOTE] > 如果你不想手写测试的 capability 对象，你可以用 [Selenium Desired Capabilities Generator](https://www.lambdatest.com/capabilities-generator/) 来生成它们。 -#### 编程填充 LambdaTest 的测试详情 - -当执行许多自动化测试时，将它们的状态标记为通过或失败，使任务变得更加容易。 - -1. 使用下面的命令将 LambdaTest 的状态标记为**通过**。 - - ```bash - driver.executeScript("lambda-status=passed"); - ``` - -2. 使用以下命令将 LambdaTest 的状态标记为**失败**。 - - ```bash - driver.executeScript("lambda-status=failed"); - ``` - ### BrowserStack -在 BrowserStack 进行 Selenium 远程测试很简单，参考下面的代码示例： +在 BrowserStack 进行 Selenium 远程测试很简单，你需要的代码应遵循以下模式。 -1. 在你的工程目录下，新建一个文件 `bstack_google_test.js`. +我们来写一个例子： + +1. 在你的工程目录下，新建一个文件 `bstack_google_test.js`。 2. 复制下面内容： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; + const { Builder, By, Key } = require("selenium-webdriver"); + const request = require("request"); - // Input capabilities + // 输入能力 const capabilities = { - browserName: "Firefox", - browser_version: "56.0 beta", - os: "OS X", - os_version: "Sierra", - resolution: "1280x1024", - "browserstack.user": "YOUR-USER-NAME", - "browserstack.key": "YOUR-ACCESS-KEY", - "browserstack.debug": "true", - build: "First build", + "bstack:options": { + os: "OS X", + osVersion: "Sonoma", + browserVersion: "17.0", + local: "false", + seleniumVersion: "3.14.0", + userName: "YOUR-USER-NAME", + accessKey: "YOUR-ACCESS-KEY", + }, + browserName: "Safari", }; - const driver = new webdriver.Builder() + const driver = new Builder() .usingServer("http://hub-cloud.browserstack.com/wd/hub") .withCapabilities(capabilities) .build(); - driver.get("http://www.google.com"); - driver.findElement(By.name("q")).sendKeys("webdriver"); - - driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); - }); - - driver.findElement(By.name("btnK")).click(); - - driver.sleep(2000).then(() => { - driver.getTitle().then((title) => { + (async function bStackGoogleTest() { + try { + await driver.get("https://www.google.com/"); + await driver.findElement(By.name("q")).sendKeys("webdriver", Key.RETURN); + await driver.sleep(2000); + const title = await driver.getTitle(); if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试通过"); } else { - console.log("Test failed"); + console.log("测试失败"); } - }); - }); - - driver.quit(); + } finally { + await driver.sleep(4000); // 延迟足够长的时间以看到搜索页面！ + await driver.quit(); + } + })(); ``` -3. 在 [BrowserStack automation dashboard](https://www.browserstack.com/automate) 中获取你的用户名和访问密钥（查看 _Username and Access Keys_），替换代码中 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的对应值（并确保它们安全存放）。 +3. 从 [BrowserStack Account - Summary](https://www.browserstack.com/accounts/profile/details) 获取用户名和访问密钥（请参阅*用户名和访问密钥*）。用实际用户名和访问密钥值替换代码中的 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 占位符（并确保它们不泄露）。 4. 执行下面命令： ```bash node bstack_google_test ``` - 测试被发送给 BrowserStackces, 测试结果会返回到你的控制台。这体现了包含报告机制的重要性！ + 测试被发送给 BrowserStack，测试结果会返回到你的控制台。这体现了包含报告机制的重要性！ -5. 现在回到 [BrowserStack automation dashboard](https://www.browserstack.com/automate) 页面，你会看到测试列出来的结果： +5. 现在回到 [BrowserStack 自动化仪表板](https://www.browserstack.com/automate)页面，你会看到测试列出来的结果： ![BrowserStack 自动测试结果](bstack_automated_results.png) -点击测试链接，会打开一个播放记录了测试视频的屏幕和在测试过程中相关的日志详情。 +如果你点击了测试链接，就会进入一个新的屏幕，在那里可以看到测试的视频记录，以及与测试相关的多个详细信息记录。 > [!NOTE] > Browserstack 自动化仪表盘的 _Resources_ 菜单选项上提供了许多运行自动化测试的有用信息。查看[使用 Node JS 编写自动化测试的文档](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs)获取相关信息，研究一下使用 BrowserStack 可以帮你做到哪些事情。 > [!NOTE] -> 如果你不想自己写测试用例，可以使用文档中嵌入的生成器，参见[运行你的首个测试](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test)）。 +> 如果你不想手写 capability 对象，可以使用文档中嵌入的生成器，参见[运行你的首个测试](https://www.browserstack.com/docs/automate/selenium/getting-started/nodejs#run-your-first-test)）。 #### 编程填充 BrowserStack 的测试详情 @@ -597,19 +679,25 @@ driver.quit(); 让我们来更新一下 `bstack_google_test.js` 示例，看看它们是怎样运作的： -1. 首先，导入 node 需要的模块，用来给 REST API 发送请求。在代码的顶端添加如下语句： +1. 在项目目录下运行以下命令，安装请求模块： + + ```js + npm install request + ``` + +2. 之后，导入 node 需要的模块，用来给 REST API 发送请求。在代码的顶端添加如下语句： ```js const request = require("request"); ``` -2. 现在更新一下 `capabilities` 对象，添加工程名——在右大括号前添加下面代码，记得要在上一行末增加一个逗号（在 BrowserStack 自动化仪表盘上，你可以修改 build 和 project 名称来组织不同窗口下的测试）： +3. 现在更新一下 `capabilities` 对象，添加工程名——在右大括号前添加下面代码，记得要在上一行末增加一个逗号（在 BrowserStack 自动化仪表盘上，你可以修改 build 和 project 名称来组织不同窗口下的测试）： ```js 'project' : 'Google test 2' ``` -3. 接下来获取当前会话的 `sessionId` , 就知道往哪儿发送请求（后面你会看到，ID 包含在请求的 URL 中）。将下面代码添加到创建 `driver` 对象（`var driver ...`）的代码块下面： +4. 接下来获取当前会话的 `sessionId`，从而知道往哪儿发送请求（后面你会看到，ID 包含在请求的 URL 中）。将下面代码添加到创建 `driver` 对象（`let driver …`）的代码块下面： ```js let sessionId; @@ -619,13 +707,13 @@ driver.quit(); }); ``` -4. 最后，修改下面 `driver.sleep(2000)` 的代码，添加 REST API 调用（同样，使用你的真实用户名和访问密钥替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值）： +5. 最后，修改下面 `driver.sleep(2000)` 的代码，添加 REST API 调用（同样，使用你的真实用户名和访问密钥替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值）： ```js driver.sleep(2000).then(() => { driver.getTitle().then((title) => { if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试通过"); request({ uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, method: "PUT", @@ -635,7 +723,7 @@ driver.quit(); }, }); } else { - console.log("Test failed"); + console.log("测试失败"); request({ uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, method: "PUT", @@ -651,13 +739,13 @@ driver.quit(); 代码很直观——测试一完成，就会发送一个 API 调用到 BrowserStack 来更新测试状态是通过还是完成，并且给出相关的原因。 -现在回到 [BrowserStack 自动化仪表盘](https://www.browserstack.com/automate)页面，你会看到测试会话如之前一样正常运行，并且增加了更新的数据： +现在回到 [BrowserStack 自动化仪表盘](https://live.browserstack.com/dashboard)页面，你会看到测试会话如之前一样正常运行，并且增加了更新的数据： ![BrowserStack 自定义结果](bstack_custom_results.png) ### Sauce Labs -在 Sauce Labs 远程运行 Selenium 测试与在 BrowserStack 一样简单，尽管它们有一些语法的差异。所需的代码应该满足以下样式。 +在 Sauce Labs 远程运行 Selenium 测试与在 BrowserStack 一样简单，尽管它们有一些语法的差异。所需的代码应该遵循以下模式。 我们来撰写一个示例： @@ -665,13 +753,11 @@ driver.quit(); 2. 复制下面内容： ```js - const webdriver = require("selenium-webdriver"); - const By = webdriver.By; - const until = webdriver.until; + const { Builder, By, Key } = require("selenium-webdriver"); const username = "YOUR-USER-NAME"; const accessKey = "YOUR-ACCESS-KEY"; - const driver = new webdriver.Builder() + const driver = new Builder() .withCapabilities({ browserName: "chrome", platform: "Windows XP", @@ -689,7 +775,7 @@ driver.quit(); driver.findElement(By.name("q")).sendKeys("webdriver"); driver.sleep(1000).then(() => { - driver.findElement(By.name("q")).sendKeys(webdriver.Key.TAB); + driver.findElement(By.name("q")).sendKeys(Key.TAB); }); driver.findElement(By.name("btnK")).click(); @@ -697,9 +783,9 @@ driver.quit(); driver.sleep(2000).then(() => { driver.getTitle().then((title) => { if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试成功"); } else { - console.log("Test failed"); + console.log("测试失败"); } }); }); @@ -707,7 +793,7 @@ driver.quit(); driver.quit(); ``` -3. 从你的 [Sauce Labs 用户设置](https://app.saucelabs.com/user-settings), 获取你的用户名和访问密钥，并替换代码中对于 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（确保它们依然安全）。 +3. 从你的 [Sauce Labs 用户设置](https://app.saucelabs.com/user-settings)，获取你的用户名和访问密钥，并替换代码中 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（确保它们依然不泄露）。 4. 执行如下命令运行测试： ```bash @@ -716,7 +802,7 @@ driver.quit(); 测试会被发送到 Sauce Labs，并返回相应的测试结果到你的控制台。这体现了包含报告机制的重要性！ -5. 现在访问你的 [Sauce Labs 自动化测试仪表盘](https://app.saucelabs.com/dashboard/tests) 页面，会看到列出的测试; 同样你也可以看到视频、截屏和其他类似的数据。 +5. 现在访问你的 [Sauce Labs 自动化测试仪表盘](https://app.saucelabs.com/dashboard/tests) 页面，会看到列出的测试；同样你也可以看到视频、截屏和其他类似的数据。 ![Sauce Labs 自动化测试](sauce_labs_automated_test.png) > [!NOTE] @@ -729,7 +815,7 @@ driver.quit(); 使用 Sauce Labs API 可以给测试添加更多详情，如测试是否通过、测试名称等等，Sauce Labs 默认并没有这些细节！ -示例如下： +为此，你需要： 1. 安装 Node Sauce Labs 套件（如果你之前没有运行过）： @@ -752,7 +838,7 @@ driver.quit(); }); ``` - 同样，用真实的用户名和访问密钥来替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（注意，saucelabs 的 npm 包使用的是 `password`，而不是 `accessKey`）。由于你现在正在使用这些东西两次，你可能需要创建几个辅助变量来存储它们。 + 同样，用真实的用户名和访问密钥来替换 `YOUR-USER-NAME` 和 `YOUR-ACCESS-KEY` 的值（注意，saucelabs 的 npm 包使用的是 `password`，而不是 `accessKey`）。由于你现在使用这些东西两次了，建议你创建几个辅助变量来存储它们。 4. 在 `driver` 变量定义的下方（就在 `build()` 行后面）添加下面代码块，它将获取正确的驱动 `sessionID` 来将数据写入进程（你可以在下一个代码块中看到它的动作）： @@ -769,10 +855,10 @@ driver.quit(); driver.getTitle().then((title) => { let testPassed = false; if (title === "webdriver - Google Search") { - console.log("Test passed"); + console.log("测试通过"); testPassed = true; } else { - console.error("Test failed"); + console.error("测试失败"); } saucelabs.updateJob(driver.sessionID, { @@ -791,11 +877,11 @@ driver.quit(); ### 自己的远程服务器 -如果你不想使用 Sauce Labs 或 BrowserStack 之类的服务，你也可以设置自己的远程测试服务器。具体操作如下： +如果你不想使用 Sauce Labs 或 BrowserStack 之类的服务，你也可以配置自己的远程测试服务器。具体操作如下： 1. Selenium 的远端服务器要求运行 Java，从 [Java SE 下载页面](https://www.oracle.com/java/technologies/downloads/)下载适合你平台的最新 JDK 并安装。 -2. 接着，下载最新的 [Selenium 单机服务器](http://selenium-release.storage.googleapis.com/index.html)，它作为你的脚本和浏览器驱动之间的一个代理。选择最新的稳定版本（最好不要选 beta 版本），从列表中选择以“selenium-server-standalone”开头的文件。下载完成后，放到一个靠谱的地方，比如家目录下。如果你还没有将位置添加到 `PATH`，现在就需要添加了（查看[在 Node 中创建 Selenium](#在_node_下建立_selenium) 小节）。 -3. 在作为服务器的电脑终端上执行如下代码，安装单机版服务器 +2. 接着，下载最新的 [Selenium 单机服务器](http://selenium-release.storage.googleapis.com/index.html)，它作为你的脚本和浏览器驱动之间的一个代理。选择最新的稳定版本（最好不要选 beta 版本），从列表中选择以“selenium-server-standalone”开头的文件。下载完成后，放到一个靠谱的地方，比如主目录下。如果你还没有将位置添加到 `PATH`，现在就需要添加了（查看[在 Node 中搭建 Selenium 环境](#在_node_下搭建_selenium_环境)小节）。 +3. 在作为服务器的电脑终端上执行如下代码，安装独立服务器。 ```bash java -jar selenium-server-standalone-3.0.0.jar @@ -805,7 +891,7 @@ driver.quit(); 4. 服务会运行在 `http://localhost:4444/wd/hub`，你可以去试试看是什么效果。 -现在服务器运行起来了，让我们在 selenium 服务器上来创建一个 demo 测试。 +现在服务器运行起来了，让我们在 selenium 服务器上来创建一个示例测试。 1. 复制 `google_test.js` 文件，改名为 `google_test_remote.js`，放到项目目录下。 2. 将第二段代码（以 `let driver = …` 开头的代码段）修改如下： @@ -827,7 +913,7 @@ driver.quit(); ## 将 selenium 和 CI 工具集成 -另外，将 Selenium 同 Sauce Labs 之类的其他工具集成到持续集成（CI）工具中是很有用的，这意味着你可以通过 CI 工具来运行测试，只有测试通过才允许提交代码的修改。 +另外，建议将 Selenium 同 Sauce Labs 之类的其他工具集成到持续集成（CI）工具中，这意味着你可以通过 CI 工具来运行测试，只有测试通过才允许提交代码的修改。 在这里不对这个话题进行深入探讨，但是我们建议你从 Travis CI 开始——这大概是最容易入门的 CI 工具了，它与 GitHub 和 Node 等 web 工具都有很好的集成。 @@ -845,6 +931,6 @@ driver.quit(); ## 总结 -这个模块应该是有趣的，并且应该给你足够的洞察力来编写和运行自动化测试，以便你开始编写自己的自动化测试。 +这个模块应该很有趣，并且应该让你对编写和运行自动化测试有足够的了解，以便你开始编写自己的自动化测试。 {{PreviousMenu("Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}} From 371b10399d124adc1b809eb213086b027fdbe654 Mon Sep 17 00:00:00 2001 From: xion <65892539+xionkq@users.noreply.github.com> Date: Tue, 24 Sep 2024 14:06:55 +0800 Subject: [PATCH 034/218] [zh-CN]: fix the broken link to the `path()` CSS function (#23764) --- files/zh-cn/web/css/clip-path/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/css/clip-path/index.md b/files/zh-cn/web/css/clip-path/index.md index 319eed3ec9a8f6..1731fb64e1e4f3 100644 --- a/files/zh-cn/web/css/clip-path/index.md +++ b/files/zh-cn/web/css/clip-path/index.md @@ -65,7 +65,7 @@ clip-path: unset; - : 定义一个椭圆（使用两个半径和一个圆心位置）。 - {{cssxref("basic-shape/polygon","polygon()")}} - : 定义一个多边形（使用一个 SVG 填充规则和一组顶点）。 - - {{cssxref("path","path()")}} + - {{cssxref("basic-shape/path","path()")}} - : 定义一个任意形状（使用一个可选的 SVG 填充规则和一个 SVG 路径定义）。 - `` From 16e00f6a1b6f66d4cad2e763159fe9218e500189 Mon Sep 17 00:00:00 2001 From: ikenk <93726321+ikenk@users.noreply.github.com> Date: Tue, 24 Sep 2024 20:10:04 +0800 Subject: [PATCH 035/218] zh-cn: updated Author detail page (#23734) Co-authored-by: A1lo --- .../author_detail_page/index.md | 101 ++++++++---------- 1 file changed, 47 insertions(+), 54 deletions(-) diff --git a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md index d357fd54a6e3e2..cc87121b853c2b 100644 --- a/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md +++ b/files/zh-cn/learn/server-side/express_nodejs/displaying_data/author_detail_page/index.md @@ -1,63 +1,57 @@ --- -title: 作者细节页面 +title: 作者详情页面 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page +l10n: + sourceCommit: 8d5440dbd259fd6eea32b4f4a200f25257d1bf41 --- -作者细节页面需要呈现指定作者`Author`的信息，使用 `_id` 字段的值（自动产生）识别，接着是这个作者的所有书本物件`Book`的列表。 +{{LearnSidebar}} + +作者详情页面需要呈现指定作者（`Author`）的信息，使用（自动生成的）`_id` 字段值进行标识，接着是这个作者的所有书本（`Book`）对象的列表。 ## 控制器 打开 **/controllers/authorController.js**。 -在档案最上方，加入底下几行，引入 async 和 Book 模组 (作者细节页面需要它们)。 +在文件顶部添加以下代码，以此来引入（`require()`）作者详情页所需的 `Book` 模块（其他模块，例如“express-async-handler”应该已经存在）。 ```js -var async = require("async"); -var Book = require("../models/book"); +const Book = require("../models/book"); ``` -找到 exported `author_detail()` 控制器方法，并用底下代码置换。 +找到被导出的 `author_detail()` 控制器方法，并用以下代码替换。 ```js -// Display detail page for a specific Author. -exports.author_detail = function (req, res, next) { - async.parallel( - { - author: function (callback) { - Author.findById(req.params.id).exec(callback); - }, - authors_books: function (callback) { - Book.find({ author: req.params.id }, "title summary").exec(callback); - }, - }, - function (err, results) { - if (err) { - return next(err); - } // Error in API usage. - if (results.author == null) { - // No results. - var err = new Error("Author not found"); - err.status = 404; - return next(err); - } - // Successful, so render. - res.render("author_detail", { - title: "Author Detail", - author: results.author, - author_books: results.authors_books, - }); - }, - ); -}; +// 呈现指定作者的详情页。 +exports.author_detail = asyncHandler(async (req, res, next) => { + // （并行地）获取作者的详细信息及其所有作品 + const [author, allBooksByAuthor] = await Promise.all([ + Author.findById(req.params.id).exec(), + Book.find({ author: req.params.id }, "title summary").exec(), + ]); + + if (author === null) { + // 没有结果。 + const err = new Error("Author not found"); + err.status = 404; + return next(err); + } + + res.render("author_detail", { + title: "Author Detail", + author: author, + author_books: allBooksByAuthor, + }); +}); ``` -此处的控制器方法使用 `async.parallel()`，用平行的方式，查询作者 `Author`和相应的书本实例，并附加上绘制本页面的回调，如果 2 个要求都成功完成，就运行回调。这个方式，就跟前面的种类细节页面所说明的完全相同。 +该方法与[种类详情页面](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)中描述的方法完全相同。路由控制器函数使用 `Promise.all()` 并行地查询指定的作者（`Author`）及其关联的 `Book` 实例。如果没有找到匹配的作者，则会将错误（Error）对象发送到 Express 错误处理中间件。如果找到作者，则使用“author_detail”模板呈现检索到的数据库信息。 ## 视图 -创建 **/views/author_detail.pug** ，並複制貼上底下的文字。 +创建 **/views/author_detail.pug** 并复制以下文本。 -```js +```pug extends layout block content @@ -67,30 +61,29 @@ block content div(style='margin-left:20px;margin-top:20px') - h4 Books - - dl - each book in author_books - dt - a(href=book.url) #{book.title} - dd #{book.summary} - - else - p This author has no books. + h2(style='font-size: 1.5rem;') Books + if author_books.length + dl + each book in author_books + dt + a(href=book.url) #{book.title} + dd #{book.summary} + else + p This author has no books. ``` 本模板里的所有事物，都在先前的章节演示过了。 ## 它看起來像是？ -运行本应用，并打开浏览器访问 。选择 All Authors 连结，然后选择一个作者。如果每个东西都设定正确了，你的网站看起来应该会像底下的截图。 +运行本应用并打开浏览器访问 `http://localhost:3000/`。选择 _All Authors_ 链接，然后选择一个作者。如果每个配置都设定正确了，你的网站应该类似于下方的截图。 -![Author Detail Page - Express Local Library site](locallibary_express_author_detail.png) +![作者详情页面——Express 本地图书馆网站](locallibary_express_author_detail.png) > [!NOTE] -> 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战处理它。 +> 作者的出生与死亡日期的外观很丑！我们将在本文最后的自我挑战中处理它。 ## 下一步 -- 回到 [Express 教程 5: 呈现图书馆数据](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data) -- 继续教程 5 的下一个部分 : [书本实例细节页面和自我挑战](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge) +- 回到 [Express 教程 5：呈现图书馆数据](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data) +- 继续教程 5 的下一个部分：[书本实例细节页面和自我挑战](/zh-CN/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge) From 16145fef74aec6b9c9b503082e42be4f57d78afc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Sep 2024 08:10:04 +0900 Subject: [PATCH 036/218] =?UTF-8?q?2024/05/13=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../serviceworkerglobalscope/message_event/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/message_event/index.md b/files/ja/web/api/serviceworkerglobalscope/message_event/index.md index 165bc7b2f8727d..06c3b65e4e3237 100644 --- a/files/ja/web/api/serviceworkerglobalscope/message_event/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/message_event/index.md @@ -1,13 +1,14 @@ --- title: "ServiceWorkerGlobalScope: message イベント" +short-title: message slug: Web/API/ServiceWorkerGlobalScope/message_event l10n: - sourceCommit: c7aeb96dac3e0ac2864cffe45c02d214ae1a5219 + sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994 --- -{{APIRef("Service Workers API")}} +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} -**`message`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、着信メッセージを受信したときに発生します。 制御されたページは、 {{domxref("Worker.postMessage()", "ServiceWorker.postMessage()")}} メソッドを使用して、サービスワーカーにメッセージを送信することができます。 +**`message`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、着信メッセージを受信したときに発生します。 制御されたページは、{{domxref("ServiceWorker.postMessage()")}} メソッドを使用して、サービスワーカーにメッセージを送信することができます。 サービスワーカーは、任意で、制御されたページに対応する {{domxref("Client.postMessage()")}} を介して返信することができます。 このイベントはキャンセル不可で、バブリングしません。 @@ -33,11 +34,11 @@ onmessage = (event) => {}; _親である {{domxref("ExtendableEvent")}} からプロパティを継承しています_。 - {{domxref("ExtendableMessageEvent.data")}} {{ReadOnlyInline}} - - : イベントのデータを返します。任意のデータ型にすることができます。 + - : イベントのデータを返します。任意のデータ型にすることができます。`messageerror` イベントで配信された場合、プロパティは `null` になります。 - {{domxref("ExtendableMessageEvent.origin")}} {{ReadOnlyInline}} - : メッセージを送信した {{domxref("Client")}} のオリジンを返します。 - {{domxref("ExtendableMessageEvent.lastEventId")}} {{ReadOnlyInline}} - - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。これは空文字列です。 + - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。 - {{domxref("ExtendableMessageEvent.source")}} {{ReadOnlyInline}} - : メッセージを送信した {{domxref("Client")}} オブジェクトへの参照を返します。 - {{domxref("ExtendableMessageEvent.ports")}} {{ReadOnlyInline}} @@ -99,5 +100,4 @@ self.onmessage = (event) => { - [サービスワーカーの使用](/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers) - [サービスワーカーの基本的なコード例](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker)（英語） -- [ServiceWorker の準備はできていますか？](https://jakearchibald.github.io/isserviceworkerready/)（英語） - [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) From b5d92998c3b20d3beed1f17291ca4c7346cc50ac Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Sep 2024 08:13:58 +0900 Subject: [PATCH 037/218] =?UTF-8?q?2024/04/22=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../messageerror_event/index.md | 100 ++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md diff --git a/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md b/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md new file mode 100644 index 00000000000000..050ff9942cfb5b --- /dev/null +++ b/files/ja/web/api/serviceworkerglobalscope/messageerror_event/index.md @@ -0,0 +1,100 @@ +--- +title: "ServiceWorkerGlobalScope: messageerror イベント" +short-title: messageerror +slug: Web/API/ServiceWorkerGlobalScope/messageerror_event +l10n: + sourceCommit: 2ef36a6d6f380e79c88bc3a80033e1d3c4629994 +--- + +{{APIRef("Service Workers API")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} + +**`messageerror`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、受信メッセージがデシリアライズできない場合に発生します。 + +このイベントはキャンセル不可で、バブリングしません。 + +## 構文 + +このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。 + +```js +addEventListener("messageerror", (event) => {}); + +onmessageerror = (event) => {}; +``` + +## イベント型 + +{{domxref("ExtendableMessageEvent")}} です。 {{domxref("ExtendableEvent")}} を継承しています。 + +{{InheritanceDiagram("ExtendableMessageEvent")}} + +## イベントプロパティ + +_親である {{domxref("ExtendableEvent")}} からプロパティを継承しています_。 + +- {{domxref("ExtendableMessageEvent.data")}} {{ReadOnlyInline}} + - : イベントのデータを返します。任意のデータ型にすることができます。`messageerror` イベントで配信された場合、プロパティは `null` になります。 +- {{domxref("ExtendableMessageEvent.origin")}} {{ReadOnlyInline}} + - : メッセージを送信した {{domxref("Client")}} のオリジンを返します。 +- {{domxref("ExtendableMessageEvent.lastEventId")}} {{ReadOnlyInline}} + - : [サーバー送信イベント](/ja/docs/Web/API/Server-sent_events/Using_server-sent_events)において、イベントソースの最後のイベント ID を表します。 +- {{domxref("ExtendableMessageEvent.source")}} {{ReadOnlyInline}} + - : メッセージを送信した {{domxref("Client")}} オブジェクトへの参照を返します。 +- {{domxref("ExtendableMessageEvent.ports")}} {{ReadOnlyInline}} + - : 関連するメッセージチャネルのポートを表す {{domxref("MessagePort")}} オブジェクトを含む配列を返します。 + +## 例 + +以下の例では、ページが {{domxref("ServiceWorkerRegistration.active")}} を介して {{domxref("ServiceWorker")}} オブジェクトへのハンドルを取得し、その `postMessage()` 関数を呼び出します。 + +```js +// main.js +if (navigator.serviceWorker) { + navigator.serviceWorker.register("service-worker.js"); + + navigator.serviceWorker.addEventListener("message", (event) => { + // event は MessageEvent オブジェクトです + console.log(`The service worker sent me a message: ${event.data}`); + }); + + navigator.serviceWorker.ready.then((registration) => { + registration.active.postMessage("Hi service worker"); + }); +} +``` + +サービスワーカーは、次のようにして "message" イベントを待ち受けすることでメッセージを受け取ることができます。 + +```js +// service-worker.js +self.addEventListener("messageerror", (event) => { + // event は ExtendableMessageEvent オブジェクトです + console.error("Message deserialization failed"); +}); +``` + +また、スクリプトは `onmessageerror` を使用してメッセージを待ち受けすることもできます。 + +```js +// service-worker.js +self.onmessageerror = (event) => { + // event は ExtendableMessageEvent オブジェクトです + console.error("Message deserialization failed"); +}; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("ServiceWorkerGlobalScope/message_event", "message")}} +- {{domxref("ServiceWorker.postMessage()")}} +- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) +- [Service workers basic code example](https://github.com/mdn/dom-examples/tree/main/service-worker/simple-service-worker) +- [Using web workers](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) From 5257a8f436dc5f685fe1f5257dc5f879a6cf2775 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 20 Sep 2024 08:18:52 +0900 Subject: [PATCH 038/218] =?UTF-8?q?2024/04/12=20=E6=99=82=E7=82=B9?= =?UTF-8?q?=E3=81=AE=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5?= =?UTF-8?q?=E3=81=8D=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../notificationclick_event/index.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md index 14c228d27bd68c..a71109dd9e9b07 100644 --- a/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md +++ b/files/ja/web/api/serviceworkerglobalscope/notificationclick_event/index.md @@ -1,13 +1,16 @@ --- title: "ServiceWorkerGlobalScope: notificationclick イベント" +short-title: notificationclick slug: Web/API/ServiceWorkerGlobalScope/notificationclick_event l10n: - sourceCommit: e0e09b1df51489867f2e74c18586d168ba5e00d1 + sourceCommit: 28848ba41c082db2a8c55e85c804bd06363afb57 --- -{{APIRef}} +{{APIRef("Web Notifications")}}{{SecureContext_Header}}{{AvailableInWorkers("service")}} -**`notificationclick`** イベントは、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生み出されたシステム通知がクリックされたことを示すために発生します。 +**`notificationclick`** は {{domxref("ServiceWorkerGlobalScope")}} インターフェイスのイベントで、 {{domxref("ServiceWorkerRegistration.showNotification()")}} によって生み出されたシステム通知がクリックされたことを示すために発生します。 + +メインスレッドまたは {{domxref("Notification.Notification","Notification()")}} コンストラクターを使用するサービスワーカーではないワーカーで作成された通知は、{{domxref("Notification/click_event", "click")}} イベントを代わりに {{domxref("Notification")}} オブジェクト自体で受け取ります。 このイベントはキャンセル不可で、バブリングしません。 @@ -23,13 +26,13 @@ onnotificationclick = (event) => {}; ## イベント型 -{{domxref("NotificationEvent")}} です。 {{domxref("Event")}} を継承しています。 +{{domxref("NotificationEvent")}} です。{{domxref("ExtendableEvent")}} および {{domxref("Event")}} を継承しています。 {{InheritanceDiagram("NotificationEvent")}} ## イベントプロパティ -_親である {{domxref("Event")}} からプロパティを継承しています_。 +_祖先である {{domxref("ExtendableEvent")}} および {{domxref("Event")}} からプロパティを継承しています_。 - {{domxref("NotificationEvent.notification")}} {{ReadOnlyInline}} - : クリックされイベントが発行された通知を表す {{domxref("Notification")}} オブジェクトを返します。 @@ -86,11 +89,11 @@ self.onnotificationclick = (event) => { }; ``` -イベントのアクションは `event.action` を使って {{domxref("ServiceWorkerGlobalScope.notificationclick_event", "notificationclick")}} イベントハンドラーの中で処理することができます。 +イベントのアクションは `event.action` を使って `notificationclick` イベントハンドラーの中で処理することができます。 ```js navigator.serviceWorker.register("sw.js"); -Notification.requestPermission((result) => { +Notification.requestPermission().then((result) => { if (result === "granted") { navigator.serviceWorker.ready.then((registration) => { // Archive というタイトルのアクションを含んだ通知を表示します。 From e13e2f26fdfc8d4309f8a5717cf0974e8a610d28 Mon Sep 17 00:00:00 2001 From: Nistek <61591806+Nistek@users.noreply.github.com> Date: Tue, 24 Sep 2024 18:14:46 +0200 Subject: [PATCH 039/218] index.md finished samples fix (#23680) * index.md finished samples fix Fixed missing finished samples lines --- .../index.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md index 5cabfcf8c6735e..7c5a0e24cc4b5a 100644 --- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md @@ -14,7 +14,13 @@ El objetivo de esta prueba de habilidad es evaluar si has comprendido el artícu ## Texto básico HTML 1 -En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado: +En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. + +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1-finished.html", '100%', 300)}} + +Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}} @@ -24,6 +30,10 @@ En esta tarea queremos que etiquetes el HTML entregado utilizando elementos sem En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada. +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2-finished.html", '100%', 400)}} + Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}} @@ -34,6 +44,10 @@ Intenta actualizando el código más abajo para recrear el ejemplo terminado: En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3-finished.html", '100%', 120)}} + Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}} From cd60d9377bf93ab346f6d0f5ea0e7e949d692534 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 25 Sep 2024 00:30:18 +0800 Subject: [PATCH 040/218] chore(es): handling redirects of chrome.com (#23709) * chore(es): handling redirects of chrome.com * Apply suggestions from code review * fix: remove language query --- .../what_are_browser_developer_tools/index.md | 2 +- .../add-ons/webextensions/api/i18n/index.md | 2 +- .../add-ons/webextensions/api/storage/index.md | 2 +- .../webextensions/api/storage/local/index.md | 2 +- .../webextensions/api/storage/sync/index.md | 2 +- .../chrome_incompatibilities/index.md | 14 +++++++------- files/es/mozilla/add-ons/webextensions/index.md | 2 +- .../webextensions/what_are_webextensions/index.md | 2 +- files/es/web/api/console/assert_static/index.md | 2 +- files/es/web/api/console/index.md | 2 +- files/es/web/api/navigationpreloadmanager/index.md | 6 +++--- .../inheritance_and_the_prototype_chain/index.md | 2 +- 12 files changed, 20 insertions(+), 20 deletions(-) diff --git a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index 636f1e1d72f122..a85ab0474f4bfe 100644 --- a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -227,7 +227,7 @@ Obtén más información sobre la consola de JavaScript en diferentes navegadore - [Consola Web de Firefox.](/es/docs/Tools/Web_Console) - [Consola de JavaScript Edge.](https://docs.microsoft.com/es-es/microsoft-edge/devtools-guide-chromium) -- [Consola JavaScript de Chrome.](https://developer.chrome.com/devtools/docs/console) (el inspector de Opera funciona de la misma manera) +- [Consola JavaScript de Chrome.](https://developer.chrome.com/docs/devtools/console/) (el inspector de Opera funciona de la misma manera) - [Consola en Safari.](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) ## Ve también diff --git a/files/es/mozilla/add-ons/webextensions/api/i18n/index.md b/files/es/mozilla/add-ons/webextensions/api/i18n/index.md index 4698c256bf0cbd..266920f6fad0f6 100644 --- a/files/es/mozilla/add-ons/webextensions/api/i18n/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/i18n/index.md @@ -38,7 +38,7 @@ Para obtener más información sobre el uso de i18n en su extensión, consulte: > **Nota:** **Reconocimientos** > -> Esta API se basa en la API [`chrome.i18n`](https://developer.chrome.com/extensions/i18n) de Chromium. Esta documentación deriva del archivo [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) en el código fuente de Chromium. +> Esta API se basa en la API [`chrome.i18n`](https://developer.chrome.com/docs/extensions/reference/api/i18n) de Chromium. Esta documentación deriva del archivo [`i18n.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/i18n.json) en el código fuente de Chromium. > > Los datos de compatibilidad de Microsoft Edge son suministrados por Microsoft Corporation y se incluyen aquí según los términos de la licencia Creative Commons Atribución 3.0, versión estadounidense. diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/index.md b/files/es/mozilla/add-ons/webextensions/api/storage/index.md index eeac133e349e9c..aac3e9e40ce5c6 100644 --- a/files/es/mozilla/add-ons/webextensions/api/storage/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/storage/index.md @@ -54,7 +54,7 @@ El almacenamiento tiene tres propiedades, que representan los diferentes tipos d > **Nota:** **Agradecimientos** > -> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/extensions/storage) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. +> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. > > Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0. diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md index 4f8a0e65b44a18..66bedab7ed52d6 100644 --- a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.md @@ -41,7 +41,7 @@ El objeto local implementa los métodos definidos en el{{WebExtAPIRef("storage.S > **Nota:** **Agradecimientos** > -> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-local) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. +> Esta API se basa en la API [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage#property-local) de Chromium. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. > > Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0. diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md index 85a395760d9fc7..31a097f5010217 100644 --- a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md +++ b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.md @@ -36,7 +36,7 @@ El objeto de sincronización implementa los métodos definidos en el {{WebExtAPI > **Nota:** **Agradecimientos** > -> Esta API está basada en la API de Chromium's [`chrome.storage`](https://developer.chrome.com/extensions/storage#property-sync) API. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. +> Esta API está basada en la API de Chromium's [`chrome.storage`](https://developer.chrome.com/docs/extensions/reference/api/storage#property-sync) API. Esta documentación se deriva de [`storage.json`](https://chromium.googlesource.com/chromium/src/+/master/extensions/common/api/storage.json) en el código de Chromium. > > Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0. diff --git a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md index 07e44cbcda6c54..7e5aaa27d4325b 100644 --- a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md +++ b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md @@ -213,14 +213,14 @@ Firefox doesn't yet support the `callback` argument to `executeScript()`. We don't yet support the following APIs, but plan to, soon: -- [commands](https://developer.chrome.com/extensions/commands) +- [commands](https://developer.chrome.com/docs/extensions/reference/api/commands) - [Devtools (mostly panels)](https://developer.chrome.com/extensions/devtools) -- [downloads](https://developer.chrome.com/extensions/downloads) -- [history](https://developer.chrome.com/extensions/history) -- [idle](https://developer.chrome.com/extensions/idle) -- [omnibox](https://developer.chrome.com/extensions/omnibox) -- [permissions](https://developer.chrome.com/extensions/permissions) -- [Native messaging (runtime.connectNative)](https://developer.chrome.com/extensions/runtime#method-connectNative) +- [downloads](https://developer.chrome.com/docs/extensions/reference/api/downloads) +- [history](https://developer.chrome.com/docs/extensions/reference/api/history) +- [idle](https://developer.chrome.com/docs/extensions/reference/api/idle) +- [omnibox](https://developer.chrome.com/docs/extensions/reference/api/omnibox) +- [permissions](https://developer.chrome.com/docs/extensions/reference/api/permissions) +- [Native messaging (runtime.connectNative)](https://developer.chrome.com/docs/extensions/reference/api/runtime#method-connectNative) ### CSS diff --git a/files/es/mozilla/add-ons/webextensions/index.md b/files/es/mozilla/add-ons/webextensions/index.md index 34b89d4d55f218..c61b85af201abe 100644 --- a/files/es/mozilla/add-ons/webextensions/index.md +++ b/files/es/mozilla/add-ons/webextensions/index.md @@ -5,7 +5,7 @@ slug: Mozilla/Add-ons/WebExtensions {{AddonSidebar}} -Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la [API de extensión](https://developer.chrome.com/extensions) soportada por Google Chrome, Opera y el [borrador del grupo de la comunidad del W3C](https://browserext.github.io/browserext/). +Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la [API de extensión](https://developer.chrome.com/docs/extensions) soportada por Google Chrome, Opera y el [borrador del grupo de la comunidad del W3C](https://browserext.github.io/browserext/). Las extensiones escritas para estos navegadores se ejecutarán en la mayoría de los casos en Firefox o [Microsoft Edge](https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/) con sólo [unos pocos cambios](/es/Add-ons/WebExtensions/Porting_from_Google_Chrome). La API también es totalmente compatible con [multiprocesos de Firefox](/es/Firefox/Multiprocess_Firefox). diff --git a/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md b/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md index 6481621a896f67..b157b8f2afe40d 100644 --- a/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md +++ b/files/es/mozilla/add-ons/webextensions/what_are_webextensions/index.md @@ -43,7 +43,7 @@ Ejemplos: [Asteroids in Popup](https://addons.mozilla.org/en-US/firefox/addon/as **Ejemplos:** [Web Developer](https://addons.mozilla.org/en-US/firefox/addon/web-developer/), [Web React Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [aXe Developer Tools](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/) -Las extensiones para Firefox se construyen utilizando las [APIs de WebExtensions](/es/docs/Mozilla/Add-ons/WebExtensions), un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la [extension API](https://developer.chrome.com/extensions) soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos [cambios](/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension). La API es también totalmente compatible con los [multiprocesos de Firefox](/es/Firefox/Multiprocess_Firefox). +Las extensiones para Firefox se construyen utilizando las [APIs de WebExtensions](/es/docs/Mozilla/Add-ons/WebExtensions), un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la [extension API](https://developer.chrome.com/docs/extensions) soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos [cambios](/es/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension). La API es también totalmente compatible con los [multiprocesos de Firefox](/es/Firefox/Multiprocess_Firefox). Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en el [Discourse de Add-ons](https://discourse.mozilla.org/c/add-ons/35) o en [#extdev](irc://irc.mozilla.org/extdev) en [IRC](https://wiki.mozilla.org/IRC). diff --git a/files/es/web/api/console/assert_static/index.md b/files/es/web/api/console/assert_static/index.md index 956f9f92f7a4ed..2fb3afb7f71e70 100644 --- a/files/es/web/api/console/assert_static/index.md +++ b/files/es/web/api/console/assert_static/index.md @@ -46,4 +46,4 @@ Para más detalles ver [Salida de texto a la consola](/es/docs/Web/API/console#O - [Opera Dragonfly documentación: Consola](http://www.opera.com/dragonfly/documentation/console/) - [MSDN: Usando F12 Herramientas de Consola para ver Errores y Estados](http://msdn.microsoft.com/library/gg589530) -- [Herramientas de Desarrollo de Chrome: Usando la Consola](https://developer.chrome.com/devtools/docs/console#assertions) +- [Herramientas de Desarrollo de Chrome: Usando la Consola](https://developer.chrome.com/docs/devtools/console/) diff --git a/files/es/web/api/console/index.md b/files/es/web/api/console/index.md index e0de3e2a958ec0..6a3391b62bf4f7 100644 --- a/files/es/web/api/console/index.md +++ b/files/es/web/api/console/index.md @@ -60,7 +60,7 @@ Esta página documenta los [Métodos](#métodos) disponibles en el objeto `conso - {{domxref("console.timeLog()")}} - : Muestra el valor del [temporizador](#temporizadores) especificado en la consola. - {{domxref("console.timeStamp()")}} {{Non-standard_inline}} - - : Agrega un marcador a las herramientas del navegador [Chrome](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/) o [Firefox](https://profiler.firefox.com/docs/#/./guide-ui-tour-timeline). + - : Agrega un marcador a las herramientas del navegador [Chrome](https://developer.chrome.com/docs/devtools/performance/reference) o [Firefox](https://profiler.firefox.com/docs/#/./guide-ui-tour-timeline). - {{domxref("console.trace()")}} - : Muestra una [traza de pila](#trazas_de_pila). - {{domxref("console.warn()")}} diff --git a/files/es/web/api/navigationpreloadmanager/index.md b/files/es/web/api/navigationpreloadmanager/index.md index 6c3ed3b84392c3..5e21e7f0d9c5c2 100644 --- a/files/es/web/api/navigationpreloadmanager/index.md +++ b/files/es/web/api/navigationpreloadmanager/index.md @@ -41,7 +41,7 @@ Esto se podría usar, por ejemplo, para reducir los datos enviados a solo una pa ## Ejemplos -Los ejemplos aquí son de [Acelera el _Service Worker_ con precargas de navegación](https://developer.chrome.com/blog/navigation-preload/) (developer.chrome.com). +Los ejemplos aquí son de [Acelera el _Service Worker_ con precargas de navegación](https://web.dev/navigation-preload/?hl=es-419) (developer.chrome.com). ### Detectar características y habilitar precarga de navegación @@ -114,7 +114,7 @@ navigator.serviceWorker.ready }); ``` -[Acelera el _Service Worker_ con precargas de navegación > Respuestas personalizadas para precargas](https://developer.chrome.com/blog/navigation-preload/) proporciona un ejemplo más completo de un sitio donde se construye la respuesta para una página web de artículo desde un encabezado y pie de página en caché, de modo que solo devuelva el contenido del artículo para una precarga. +[Acelera el _Service Worker_ con precargas de navegación > Respuestas personalizadas para precargas](https://web.dev/navigation-preload/?hl=es-419) proporciona un ejemplo más completo de un sitio donde se construye la respuesta para una página web de artículo desde un encabezado y pie de página en caché, de modo que solo devuelva el contenido del artículo para una precarga. ### Obtener el estado @@ -142,4 +142,4 @@ navigator.serviceWorker.ready ## Véase también -- [Acelera el _Service Worker_ con precargas de navegación](https://developer.chrome.com/blog/navigation-preload/) (developer.chrome.com) +- [Acelera el _Service Worker_ con precargas de navegación](https://web.dev/navigation-preload/?hl=es-419) (developer.chrome.com) diff --git a/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md index 5ea1bcb2363dbe..e69960bdbffb63 100644 --- a/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -252,7 +252,7 @@ Por ejemplo, los "métodos de array" como [`map()`](/es/docs/Web/JavaScript/Refe > [!WARNING] > Hay un error que solía ser frecuente: extender `Object.prototype` o uno de los otros prototipos integrados. Un ejemplo de esta característica errónea es definir `Array.prototype.myMethod = function () {...}` y luego usar `myMethod` en todas las instancias de matriz. > -> Esta característica errónea se llama _parche de mono_/_monkey patching_. Hacer parche de mono/monkey patching arriesga la compatibilidad futura, porque si el lenguaje agrega este método en el futuro pero con una firma diferente, su código se romperá. Ha provocado incidentes como el [SmooshGate](https://developer.chrome.com/blog/smooshgate?hl=es-419), y puede ser una gran molestia para que el lenguaje avance ya que JavaScript intenta "no romper la web". +> Esta característica errónea se llama _parche de mono_/_monkey patching_. Hacer parche de mono/monkey patching arriesga la compatibilidad futura, porque si el lenguaje agrega este método en el futuro pero con una firma diferente, su código se romperá. Ha provocado incidentes como el [SmooshGate](https://developer.chrome.com/blog/smooshgate), y puede ser una gran molestia para que el lenguaje avance ya que JavaScript intenta "no romper la web". > > La **única** buena razón para extender un prototipo integrado es respaldar las características de los motores JavaScript más nuevos, como `Array.prototype.forEach`. From b2dc4706b4fb501102a05f94c11244aa1475a317 Mon Sep 17 00:00:00 2001 From: Manu de Frutos Vila Date: Tue, 24 Sep 2024 18:52:51 +0200 Subject: [PATCH 041/218] Update arial-label with aria-labelledby links (#23754) * Update arial-label with aria-labelledby links --- .../es/web/accessibility/aria/attributes/aria-label/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/es/web/accessibility/aria/attributes/aria-label/index.md b/files/es/web/accessibility/aria/attributes/aria-label/index.md index 424f5720700e72..e1c7e9a9bd7a93 100644 --- a/files/es/web/accessibility/aria/attributes/aria-label/index.md +++ b/files/es/web/accessibility/aria/attributes/aria-label/index.md @@ -5,7 +5,7 @@ slug: Web/Accessibility/ARIA/Attributes/aria-label {{AccessibilitySidebar}} -El atributo [`aria-label`](https://www.w3.org/TR/wai-aria/#aria-label) se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla. Si hay texto visible etiquetando el elemento, utilice [aria-labelledby](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) en su lugar. +El atributo [`aria-label`](https://www.w3.org/TR/wai-aria/#aria-label) se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla. Si hay texto visible etiquetando el elemento, utilice [aria-labelledby](/es/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) en su lugar. Este atributo puede ser utilizado con cualquier elemento HTML típico; no se limita a los elementos que tienen un papel ARIA asignado. @@ -39,7 +39,7 @@ Todos los elementos del DOM ### Técnicas ARIA relacionadas -- [Usando el atributo aria-labelledby](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) +- [Usando el atributo aria-labelledby](/es/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) ### Compatibilidad From cf4e218a9794ed5f406bb244a8291d9fe8d6c52c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E5=BC=80=E8=8A=B1=E8=90=BD?= Date: Wed, 25 Sep 2024 10:05:29 +0800 Subject: [PATCH 042/218] chore(zh-cn): fix broken links and clean up the translation (#23766) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Allo --- files/zh-cn/web/html/element/form/index.md | 150 +++++++++++---------- 1 file changed, 82 insertions(+), 68 deletions(-) diff --git a/files/zh-cn/web/html/element/form/index.md b/files/zh-cn/web/html/element/form/index.md index ebf4effa48b3f7..27a966af6e40e0 100644 --- a/files/zh-cn/web/html/element/form/index.md +++ b/files/zh-cn/web/html/element/form/index.md @@ -11,42 +11,9 @@ slug: Web/HTML/Element/form 可以用 {{cssxref(':valid')}} 和 {{cssxref(':invalid')}} CSS 伪类来设置 `
` 元素的样式，此时样式的表现取决于表单中的 {{domxref("HTMLFormElement.elements", "elements")}} 是否有效。 -
目标： - 展示如何在本地建立一个 Selenium 测试环境并运行测试，以及如何将其与 LambdaTest、Sauce Labs 和 BrowserStack 等工具集成。 + 展示如何在本地建立 Selenium 测试环境并运行测试，以及如何将其与 LambdaTest、Sauce Labs 和 BrowserStack 等工具集成。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
内容类别Flow content, palpable content
可包含内容Flow content, but not containing <form> elements
标签省略不允许，开始标签和结束标签都不能省略。
允许的父级元素可以是 HTML 的任何标签
Implicit ARIA roleform if the form has an accessible name, otherwise no corresponding role
Permitted ARIA rolessearch, group, presentation
DOM 接口{{domxref("HTMLFormElement")}}
- ## 属性 -此元素拥有 [全局属性](/zh-CN/docs/HTML/Global_attributes)。 +此元素拥有[全局属性](/zh-CN/docs/Web/HTML/Global_attributes)。 - `accept`{{Deprecated_Inline}} @@ -70,13 +37,13 @@ slug: Web/HTML/Element/form - : 用于指示 input 元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的 `autocomplete` 属性覆盖。可能的值有： - - `off`：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见 [自动填充属性和登录](/zh-CN/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#禁用自动填充)） + - `off`：浏览器可能不会自动补全条目（在疑似登录表单中，浏览器倾向于忽略该值，而提供密码自动填充功能，参见[自动填充属性和登录](/zh-CN/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion#autocomplete_属性和登录字段)） - `on`：浏览器可自动补全条目 - `name` - - : 表单的名称。HTML 4 中不推荐（应使用 `id`）。在 HTML 5 中，该值必须是所有表单中独一无二的，而且不能是空字符串。 -- `rel` - - : 根据 value 创建一个超链接或 Creates a hyperlink or annotation depending on the value, see the [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) attribute for details. + - : 表单的名称。该值不能是空字符串，而且在其所在的表单集合中的所有表单（`form`）元素之中必须是独一无二的（如果有的话）。 +- [`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) + - : 控制注释和表单创建的链接类型。注释包括 [`external`](/zh-CN/docs/Web/HTML/Attributes/rel#external)、[`nofollow`](/zh-CN/docs/Web/HTML/Attributes/rel#nofollow)、[`opener`](/zh-CN/docs/Web/HTML/Attributes/rel#opener)、[`noopener`](/zh-CN/docs/Web/HTML/Attributes/rel#noopener) 和 [`noreferrer`](/zh-CN/docs/Web/HTML/Attributes/rel#noreferrer)。链接类型包括 [`help`](/zh-CN/docs/Web/HTML/Attributes/rel#help)、[`prev`](/zh-CN/docs/Web/HTML/Attributes/rel#prev)、[`next`](/zh-CN/docs/Web/HTML/Attributes/rel#next)、[`search`](/zh-CN/docs/Web/HTML/Attributes/rel#search) 和 [`license`](/zh-CN/docs/Web/HTML/Attributes/rel#license)。[`rel`](/zh-CN/docs/Web/HTML/Attributes/rel) 值是这些枚举值的空格分隔列表。 ### 关于提交表单的属性 @@ -86,7 +53,7 @@ slug: Web/HTML/Element/form - : 处理表单提交的 URL。这个值可被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素上的 [`formaction`](/zh-CN/docs/Web/HTML/Element/button#formaction) 属性覆盖。 - `enctype` - - : 当 `method` 属性值为 `post` 时，`enctype` 就是将表单的内容提交给服务器的 [MIME 类型](http://en.wikipedia.org/wiki/Mime_type) 。可能的取值有： + - : 当 `method` 属性值为 `post` 时，`enctype` 就是将表单的内容提交给服务器的 [MIME 类型](https://zh.wikipedia.org/wiki/互联网媒体类型)。可能的取值有： - `application/x-www-form-urlencoded`：未指定属性时的默认值。 - `multipart/form-data`：当表单包含 `type=file` 的 {{HTMLElement("input")}} 元素时使用此值。 @@ -94,56 +61,103 @@ slug: Web/HTML/Element/form - `method` - - : 浏览器使用这种 [HTTP](/zh-CN/docs/HTTP) 方式来提交 表单。可能的值有： + - : 浏览器使用这种 [HTTP](/zh-CN/docs/Web/HTTP) 方法来提交 表单。可能的值有： - - `post`：指的是 HTTP [POST 方法](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)；表单数据会包含在表单体内然后发送给服务器。 - - `get`：指的是 HTTP [GET 方法](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3)；表单数据会附加在 `action` 属性的 URL 中，并以 '?' 作为分隔符，[没有副作用](/zh-CN/docs/Glossary/Idempotent) 时使用这个方法。 + - `post`：{{HTTPMethod("POST")}} 方法；表单数据会包含在表单体内然后发送给服务器。 + - `get`（默认）：{{HTTPMethod("GET")}} 方法；表单数据会附加在 `action` 属性的 URL 中，并以 `?` 作为分隔符，[没有副作用](/zh-CN/docs/Glossary/Idempotent)时使用这个方法。 - `dialog`：如果表单在 {{HTMLElement("dialog")}} 元素中，提交时关闭对话框。此值可以被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formmethod`](/zh-CN/docs/Web/HTML/Element/button#formmethod) 属性覆盖。 - `novalidate` - : 此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formnovalidate`](/zh-CN/docs/Web/HTML/Element/button#formnovalidate) 属性覆盖。 - `target` - - : 表示在提交表单之后，在哪里显示响应信息。在 HTML 4 中，这是一个 frame 的名字/关键字对。在 HTML5 里，这是一个*浏览上下文* 的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： + - : 表示在提交表单之后，在哪里显示响应信息。这是一个*浏览上下文*的名字/关键字（如标签页、窗口或 iframe）。下述关键字有特别含义： - - `_self`：默认值。在相同浏览上下文中加载。 + - `_self`（默认）：在相同浏览上下文中加载。 - `_blank`：在新的未命名的浏览上下文中加载。 - - `_parent`：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 \_self 表现一致。 - - `_top`：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 \_self 表现一致。此值可以被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formtarget`](/zh-CN/docs/Web/HTML/Element/button#formtarget) 属性覆盖。 + - `_parent`：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 `_self` 表现一致。 + - `_top`：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 `_self` 表现一致。此值可以被 {{HTMLElement("button")}}、[``](/zh-CN/docs/Web/HTML/Element/input/submit) 或 [``](/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [`formtarget`](/zh-CN/docs/Web/HTML/Element/button#formtarget) 属性覆盖。 ## 示例 ### HTML ```html - - - - + + + + - +
- - + +
- +
- Title - + 是否同意该条款？ + +
``` -{{ EmbedLiveSample('示例', '100%', 110) }} +{{ EmbedLiveSample('示例') }} + +## 技术概要 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 内容分类 + + 流式内容、可感知内容 +
允许的内容 + 流式内容，但不能包含 <form> 元素 +
标签省略不允许，开始标签和结束标签都不能省略。
允许的父元素 + 任何接受流式内容的元素 +
隐含的 ARIA 角色 + form +
允许的 ARIA 角色 + search、none 或 presentation +
DOM 接口{{domxref("HTMLFormElement")}}
## 规范 @@ -155,8 +169,8 @@ slug: Web/HTML/Element/form ## 参见 -- [HTML 表单指南](/zh-CN/docs/Web/Guide/HTML/Forms) -- 还有其他的一些元素也用于创建表单：{{HTMLElement("button")}}、{{HTMLElement("datalist")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("input")}}、{{HTMLElement("label")}}、{{HTMLElement("legend")}}、{{HTMLElement("meter")}}、{{HTMLElement("optgroup")}}、{{HTMLElement("option")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} -- Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}} -- [ARIA: Form role](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role) -- [ARIA: Search role](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role) +- [HTML 表单指南](/zh-CN/docs/Learn/Forms) +- 还有其他的一些元素也用于创建表单：{{HTMLElement("button")}}、{{HTMLElement("datalist")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("input")}}、{{HTMLElement("label")}}、{{HTMLElement("legend")}}、{{HTMLElement("meter")}}、{{HTMLElement("optgroup")}}、{{HTMLElement("option")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。 +- 获取表单中的元素列表：{{domxref("HTMLFormElement.elements")}} +- [ARIA：Form 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role) +- [ARIA：Search 角色](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role) From e728a61f15c05465a2fe1b5a3c94ab948c367f9c Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 25 Sep 2024 04:07:41 +0200 Subject: [PATCH 043/218] Markdownlint auto-cleanup for zh-cn (#23771) Co-authored-by: A1lo --- .../your_own_automation_environment/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md index 1f83988be50461..2ab7dc0dd3048a 100644 --- a/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md +++ b/files/zh-cn/learn/tools_and_testing/cross_browser_testing/your_own_automation_environment/index.md @@ -59,7 +59,7 @@ l10n: 接下来，你需要下载相应的驱动，使 WebDriver 能控制你需要测试的浏览器。在 [selenium-webdriver](https://www.npmjs.com/package/selenium-webdriver) 页面（参见第一部分的表格）查看如何下载。显然，有些浏览器是操作系统特定的，我们将坚持使用 Firefox 和 Chrome，因为它们可以在所有主要的操作系统上使用。 -1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（用于 Firefox）和 [ChromeDriver](https://developer.chrome.com/docs/chromedriver/downloads?hl=zh-cn) 驱动。 +1. 下载最新版本的 [GeckoDriver](https://github.com/mozilla/geckodriver/releases/)（用于 Firefox）和 [ChromeDriver](https://developer.chrome.google.cn/docs/chromedriver/downloads) 驱动。 2. 将它们解压到一个容易访问的地方，比如你的主用户目录的根目录。 3. 将 `chromedriver` 和 `geckodriver` 驱动的目录添加到你的系统 `PATH` 变量中，这应该是从你的硬盘根目录开始的一个绝对路径。举个例子，如果我们使用的是 macOS 机器，用户名为 bob，并且将驱动放在用户的根目录下，那么路径就是 `/Users/bob`。 From 607d0c33bba6bc09618859ae2881a5a7a75af51b Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 25 Sep 2024 10:20:55 +0800 Subject: [PATCH 044/218] [zh-CN]: add translation for Document Picture-in-Picture API (#23735) Co-authored-by: A1lo --- .../document_picture-in-picture_api/index.md | 71 +++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 files/zh-cn/web/api/document_picture-in-picture_api/index.md diff --git a/files/zh-cn/web/api/document_picture-in-picture_api/index.md b/files/zh-cn/web/api/document_picture-in-picture_api/index.md new file mode 100644 index 00000000000000..f5a4a9d27f6990 --- /dev/null +++ b/files/zh-cn/web/api/document_picture-in-picture_api/index.md @@ -0,0 +1,71 @@ +--- +title: Document Picture-in-Picture API +slug: Web/API/Document_Picture-in-Picture_API +l10n: + sourceCommit: ac80d4deda2b072a4fc7e866b5edb14a91226319 +--- + +{{SeeCompatTable}}{{DefaultAPISidebar("Document Picture-in-Picture API")}}{{securecontext_header}} + +**Document Picture-in-Picture API** 可以打开一个始终在顶层的窗口，该窗口可以填充任意 HTML 内容——例如带有自定义控件的视频或一组显示视频会议参与者的串流。它扩展了早期的 [`