You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: microsoft-edge/devtools-guide-chromium/javascript/guides/mark-content-scripts-library-code.md
+6Lines changed: 6 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,6 +23,11 @@ ms.date: 05/04/2021
23
23
limitations under the License. -->
24
24
# Add content scripts to the Ignore List
25
25
26
+
<!-- todo: define _content script_, like in
27
+
* [Using the Content scripts tab for Microsoft Edge extensions](../../sources/index.md#using-the-content-scripts-tab-for-microsoft-edge-extensions) in _Sources tool overview_.
28
+
* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs.
29
+
-->
30
+
26
31
When you use the **Sources** tool to step through code, sometimes you pause on code that you don't recognize and don't want to step through, such as code for a Microsoft Edge extension that's installed.
27
32
28
33
To avoid pausing on extension code:
@@ -40,6 +45,7 @@ To avoid pausing on extension code:
40
45
## See also
41
46
42
47
*[Step 4: Step through the code](../index.md#step-4-step-through-the-code) in _Get started debugging JavaScript_
48
+
*[Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs.
<!-- first give the always-available GUI way, then keyboard shortcuts, then transient UI in instructions that aren't present when a file is open -->
13
+
<!-- first give the always-available GUI way, then keyboard shortcuts
14
+
don't doc the empty tool UI, which is transient and is designed for the Sources tool -->
14
15
15
-
Use the **Quick source** tool to display or edit source files at the same time as displaying a tool other than the **Sources** tool.
16
+
Use the **Quick source** tool to display or edit source files at the same time as displaying a tool other than the **Sources** tool. The **Quick source** tool always displays the same files that are open in the **Sources** tool.
To make a file appear in the **Quick source** tool, open a file in the **Sources** tool, as follows:
36
+
<!-- todo: run & show localhost in addr bar instead of github.io? -->
37
+
38
+
To view source files while using a tool than the **Sources** tool in the **Activity Bar**, use the **Quick source** tool, as follows:
36
39
37
40
1. Open a webpage; for example, open [Demo To Do](https://microsoftedge.github.io/Demos/demo-to-do/) in a new window or page.
38
41
39
42
1. Right-click the webpage and then select **Inspect**.
40
43
41
44
DevTools opens.
42
45
43
-
1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**.
44
-
45
-
1. In the **Quick View** toolbar at the bottom of DevTools, click the **More tools** button, and then select **Quick source**.
46
-
47
-
The **Quick source** tool opens in **Quick View**:
48
-
49
-
50
-
51
-
The **Quick source** tool might show instructions including an **Open file** link, or it might display a file. Instead of using that transient link, the following steps show how to use the **Page** tab in the **Sources** tool, to make a file appear in the **Quick source** tool.
52
-
53
-
**Open a file by using the Sources tool:**
54
-
55
46
1. In the **Activity Bar** at the top of DevTools, select the **Sources** () tool.
56
47
57
-
The **Quick View** pane is minimized at the bottom of DevTools.
58
-
59
48
1. In the **Sources** tool, in the **Page** tab, select one or more files, such as `to-do.js`.
60
49
61
50
The tabs for the selected files are opened in the **Sources** tool:
62
51
63
52
64
53
65
-
1. In the **Activity Bar** at the top of DevTools, select a tool other than **Sources**, such as **Elements**.
54
+
1. In the **Activity Bar** at the top of DevTools, select a tool other than **Sources**, such as **Elements** ().
66
55
67
-
The **Quick source** tool expands in **Quick View** at the bottom of DevTools, and has a tab for each open file:
56
+
1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**.
57
+
58
+
1. In the **Quick View** toolbar at the bottom of DevTools, click the **More tools** button, and then select **Quick source**.
68
59
69
-
<!-- 1st use -->
60
+
The **Quick source** tool expands in **Quick View** at the bottom of DevTools, and displays the same files that are open in the **Sources** tool:
70
61
71
-
You can now view or edit the file in the **Quick source** tool, at the same time as displaying a different tool.
62
+
63
+
64
+
You can now view or edit the file in the **Quick source** tool, at the same time as displaying a different tool in the main part of DevTools.
72
65
73
66
See also:
74
67
*[Using the Page tab to explore resources that construct the current webpage](../sources/index.md#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage) in _Sources tool overview_.
## Edit local source files in DevTools by selecting a Workspace folder
79
72
80
-
By selecting a local folder as a **Workspace**, you can edit files from within the **Quick source** tool at the same time as displaying a different tool (or from within the **Sources** tool), and have those edits be saved to your local drive. This way, when you edit a file in DevTools, the edits are not only made to the transient file that's returned by the server, but are also saved to the source file on your local drive.
73
+
By selecting a local folder as a **Workspace** in the **Sources** tool, you can then edit files from within the **Quick source** tool at the same time as displaying a different tool, and have those edits be saved to your local drive. This way, you can edit files in the **Quick source** tool while using another tool, such as **Elements** or **Network**, and have your edits be saved to the corresponding source file on your local drive.
81
74
82
-
To open a server webpage file in the **Quick source** tool and save any edits to your local **Workspace** folder of source files:
75
+
To edit source files in the **Quick source** tool:
83
76
84
-
1.Open the DevTools **Quick source** tool.
85
-
1.Have local source files, such as a cloned repo.
86
-
1.Select a local folder of source files as the Workspace.
77
+
1.Have access to your source files locally, such as a cloned repo. See [Have local source files, such as a cloned repo](#have-local-source-files-such-as-a-cloned-repo), below.
78
+
1.In the **Workspace** tab in the **Sources** tool, add a local folder of source files. See [Select a local folder of source files as the Workspace](#select-a-local-folder-of-source-files-as-the-workspace), below.
79
+
1.In the **Activity Bar**, select a tool other than the **Sources** tool, such as the **Elements** tool. Then in the **Quick View** panel at the bottom of DevTools, open the **Quick source** tool. See [Open the Quick source tool](#open-the-quick-source-tool), below.
87
80
88
81
These steps are detailed below.
89
82
90
83
91
-
<!-- ------------------------------ -->
92
-
#### Open the DevTools Quick source tool
93
-
94
-
1. Open a webpage that's on a web server; for example, open [Demo To Do](https://microsoftedge.github.io/Demos/demo-to-do/) in a new window or page. That page is hosted on the web server `microsoftedge.github.io`.
95
-
96
-
1. Right-click the webpage and then select **Inspect**.
97
-
98
-
DevTools opens.
99
-
100
-
1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**.
101
-
102
-
1. In the **Quick View** toolbar at the bottom of DevTools, click the **More tools** button, and then select **Quick source**.
103
-
104
-
The **Quick source** tool opens in **Quick View** at the bottom of DevTools:
105
-
106
-
107
-
108
-
The **Quick source** tool might show instructions including an **Select folder** link, or it might display a file. Instead of relying on that transient link, the steps further below show how to use the **Workspace** tab in the **Sources** tool, to select a local folder of source files.
109
-
110
-
Continue with the next section.
111
-
112
-
113
84
<!-- ------------------------------ -->
114
85
#### Have local source files, such as a cloned repo
115
86
@@ -154,6 +125,8 @@ Continue with the next section.
154
125
<!-- ------------------------------ -->
155
126
#### Select a local folder of source files as the Workspace
156
127
128
+
<!-- todo: start localhost server -->
129
+
157
130
1. In the **Activity Bar** at the top of DevTools, select the **Sources** () tool, select the **Workspace** tab (grouped with the **Page** tab), and then in the **Workspace** tab, click the **Add folder** button.
158
131
159
132
The **Select Folder** dialog opens.
@@ -170,13 +143,32 @@ Continue with the next section.
170
143
171
144
The file opens in the **Sources** tool:
172
145
173
-
146
+
<!-- todo: localhost in addr bar -->
174
147
175
148
1. In the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** tool, such as the **Elements** tool.
176
149
177
150
The **Quick source** tool expands in **Quick View** at the bottom of DevTools, and has a tab for each open file:
178
151
179
-
<!-- 2nd use -->
152
+
<!-- copied from above then appended -2 --><!-- todo: localhost in addr bar -->
153
+
154
+
Continue with the next section.
155
+
156
+
157
+
<!-- ------------------------------ -->
158
+
#### Open the Quick source tool
159
+
160
+
1. In the **Activity Bar**, select a tool other than the **Sources** tool, such as the **Elements** tool.
161
+
162
+
1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**.
163
+
164
+
1. In the **Quick View** toolbar at the bottom of DevTools, click the **More tools** button, and then select **Quick source**.
165
+
166
+
The **Quick source** tool opens in **Quick View** at the bottom of DevTools:
167
+
168
+
169
+
170
+
The **Quick source** tool might show instructions including an **Select folder** link, or it might display a file. Instead of relying on that transient link, the steps further below show how to use the **Workspace** tab in the **Sources** tool, to select a local folder of source files.
171
+
180
172
181
173
Now, when you edit the folder's files in DevTools, the edits are not only made to the transient file that's returned by the server, but are also saved to the source files on your local drive. You can edit the file from within the **Quick source** tool at the same time as displaying another tool (or from within the **Sources** tool).
Opening a file in the **Quick source** tool or **Sources** tool opens the file in both tools.
184
+
Opening a file by using the **Command Menu** opens that file in both the **Quick source** tool and **Sources** tool.
185
+
186
+
187
+
To open the **Command Menu**, do any of the following:
188
+
189
+
* Select **Customize and control DevTools** > **Run command**.
190
+
191
+
* Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS).
192
+
193
+
* Click the **Run command** link in the empty **Quick source** tool (or **Sources** tool).
193
194
194
195
195
196
To open a file by using the **Open File** prompt of the **Command Menu**, do any of the following:
@@ -209,38 +210,14 @@ To open a file by using the **Open File** prompt of the **Command Menu**, do any
209
210
To display the **Open file** link in the instructions in the panel, you might need to scroll down, or drag the **Quick View** divider up to make the **Quick View** panel taller.
0 commit comments