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
<!-- 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 -->
13
+
<!-- give the always-available GUI way, don't doc the empty tool UI -->
15
14
16
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. The **Quick source** tool always displays the same files that are open in the **Sources** tool.
The main place to view source files in the DevTools is within the **Sources** tool. But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files. Use the **Quick source** tool, which by default opens in the **Quick View** panel at the bottom of DevTools.
21
20
22
-
<!-- incoming overflow: removed from Workspace tut so that can focus only on teaching Workspace, not also Quick source.
23
-
You can edit and save the JavaScript (or HTML or CSS) file in the **Sources** tool's editor, or in the **Quick source** tool in the **Quick View** panel at the bottom of DevTools.
24
-
25
-
The main place to use the code editor of DevTools is the **Sources** tool. But sometimes you need to access other tools, such as the **Elements** tool or the **Console**, while editing files. The **Quick source** tool gives you just the editor from the **Sources** tool (without the **Navigator** or **Debugger** pane), while any tool is open in the upper part of DevTools.
26
-
27
-
We'll walk through a couple ways to open the **Quick source** tool and open a file in the **Quick source** tool:
28
-
* The regular, GUI way.
29
-
* The **Command Menu** shortcut way.
30
-
-->
31
-
32
21
33
22
<!-- ------------------------------ -->
34
23
#### Use the Quick source tool in conjunction with the Sources tool
@@ -43,11 +32,11 @@ If you open or close a file in one tool, the file is opened or closed in the oth
To use the **Quick source** tool to save changes locally, you must have local source files that match the web server files. Make sure there are source files on your local drive, that match the transient files that are returned by the web server.
98
87
99
88
For example, if not done already, clone the **MicrosoftEdge / Demos** repo to your local drive, as follows:
100
89
90
+
1. If not done already, [Download git](https://git-scm.com/downloads) and install it.
91
+
92
+
1. If not done already, install an up-to-date version of Node.js and npm from [Node.js](https://nodejs.org).
93
+
101
94
1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab.
102
95
103
96
1. Click the **Code** drop-down button.
@@ -132,10 +125,59 @@ Now you have a local folder of source files (such as `/demo-to-do/`) that match
132
125
Continue with the next section.
133
126
134
127
135
-
<!-- ------------------------------ -->
136
-
#### Select a local folder of source files as the Workspace
1. Go to a command prompt, such as the git bash shell, or the Terminal pane in Microsoft Visual Studio Code.
132
+
133
+
1. Go to the cloned `/demo-to-do/` directory, such as `C:\Users\localAccount\GitHub\Demos\demo-to-do\`.
134
+
135
+
If you use the git bash shell, it's a UNIX shell, so even on Windows, you need to wrap a directory path that has backslashes in quotes, or else use forward slashes rather than backslashes.
136
+
137
+
1. Run one of the following commands, to start the web server:
138
+
139
+
```bash
140
+
# Node.js option
141
+
cd~/GitHub/demos/demo-to-do
142
+
npx http-server # Node.js
143
+
```
144
+
145
+
For more information and options, see [Start the server (npx http-server)](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#start-the-server-npx-http-server) in _Installing the DevTools extension for Visual Studio Code_.
146
+
147
+
```bash
148
+
# Python 2 option
149
+
cd~/GitHub/demos/demo-to-do
150
+
python -m SimpleHTTPServer # Python 2
151
+
```
152
+
153
+
```bash
154
+
# Python 3 option
155
+
cd~/GitHub/demos/demo-to-do
156
+
python -m http.server # Python 3
157
+
```
158
+
159
+
1. Open a tab in Microsoft Edge, and go to the locally hosted version of the site. You should be able to access it by using `localhost:8080`:
160
+
161
+
162
+
163
+
Another common equivalent URL is `http://0.0.0.0:8080`. The default port number for the Python server option is `8000`. The exact [port number](https://wikipedia.org/wiki/Port_(computer_networking)#Use_in_URLs) might be different.
164
+
165
+
The **DevTools Workspaces Demo** webpage opens.
166
+
167
+
See also:
168
+
*[Running a simple local HTTP server](https://developer.mozilla.org/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) in _How do you set up a local testing server?_ at MDN - shows Python.
169
+
<!--
170
+
* [Set up a localhost server](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_. How to run a local HTTP web server by using Node.js. -->
## Select a local folder of source files as the Workspace
177
+
178
+
1. Continuing from above, right-click the demo webpage and then select **Inspect**.
179
+
180
+
DevTools opens.
139
181
140
182
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.
141
183
@@ -147,38 +189,65 @@ Continue with the next section.
147
189
148
190
1. Click the **Allow** button.
149
191
150
-
The **Sources** tool is opened.
192
+
The tree of `demo-to-do` files appears in the **Workspace** tab of the **Sources** tool. The HTML, JS, and CSS files have a green "mapped" dot.
151
193
152
-
1. In the **Sources** tool, in the **Workspace** tab, expand the tree, and then click one or more files, such as `to-do.js`.
194
+
1. In the **Workspace** tab, expand the file tree, and then click one or more files, such as `to-do.js`.
153
195
154
196
The file opens in the **Sources** tool:
155
197
156
-
<!-- todo: localhost in addr bar -->
198
+
157
199
158
200
1. In the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** tool, such as the **Elements** tool.
159
201
160
202
The **Quick source** tool expands in **Quick View** at the bottom of DevTools, and has a tab for each open file:
161
203
162
-
<!-- copied from above then appended -2 --><!-- todo: localhost in addr bar -->
204
+
<!-- todo: localhost in addr bar -->
205
+
206
+
1. If there's no longer a green "mapped" dot on the HTML, JS, or CSS file, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**).
Suppose you want to continue viewing the **Elements** tool, but you want to simultaneously view and edit the source files that were opened via the **Sources** tool.
169
215
170
-
1.In the **Activity Bar**, select a tool other than the **Sources** tool, such as the **Elements** tool.
216
+
1.Continuing from above, in the **Activity Bar**, select a tool other than the **Sources** tool, such as the **Elements** tool.
171
217
172
218
1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**.
173
219
174
220
1. In the **Quick View** toolbar at the bottom of DevTools, click the **More tools** button, and then select **Quick source**.
175
221
176
222
The **Quick source** tool opens in **Quick View** at the bottom of DevTools:
177
223
178
-
224
+
<!--todo:localhost-->
225
+
226
+
`todo.js` is displayed, because that file is open in the **Sources** tool.
227
+
228
+
1. In the demo To Do webpage, delete any tasks.
229
+
230
+
1. Click the **Quick source** panel, and then press **Ctrl+F**.
231
+
232
+
In the **Quick source** tool, the **Find** UI appears.
233
+
234
+
1. Enter **no tasks**, and then press **Enter**.
179
235
180
-
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.
236
+
1. In the line of code, change `no tasks`to `0 tasks`.
181
237
238
+
An asterisk appears on the file name tab.
239
+
240
+
1. Press **Ctrl+S**.
241
+
242
+
The asterisk is removed from the file name tab.
243
+
244
+
1. Refresh the demo webpage (**Ctrl+R**).
245
+
246
+
1. If the rendered webpage doesn't change from "No" to "0", and there's no longer a green "mapped" dot on the JS file name tab, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**).
247
+
248
+
The rendered webpage changes from "No" to "0", and there's a green "mapped" dot on the JS file name tab.
249
+
250
+
182
251
183
252
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).
184
253
@@ -220,6 +289,18 @@ To open a file by using the **Open File** prompt of the **Command Menu**, do any
220
289
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.
The **Quick source** tool has a streamlined UI. Use these keyboard shortcuts.
296
+
297
+
***Ctrl+F** - Find.
298
+
299
+
***Ctrl+S** - Save. If there's no longer a green "mapped" dot on the HTML, JS, or CSS file name, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**).
300
+
301
+
***Ctrl+P** - Open a file by using the **Command Menu**. Same as going to the **Sources** tool and then clicking a file in the **Workspace** tab.
Copy file name to clipboardExpand all lines: microsoft-edge/devtools-guide-chromium/sources/index.md
+32-12Lines changed: 32 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ ms.author: msedgedevrel
6
6
ms.topic: conceptual
7
7
ms.service: microsoft-edge
8
8
ms.subservice: devtools
9
-
ms.date: 07/21/2023
9
+
ms.date: 04/18/2025
10
10
---
11
11
<!-- Copyright Kayce Basques
12
12
@@ -25,19 +25,39 @@ ms.date: 07/21/2023
25
25
26
26
Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and to inspect the resources that make up the current webpage.
27
27
28
-
29
28
**Detailed contents:**
30
29
31
-
todo: update
32
-
33
-
<!-- omit h4s
34
-
* [Icons in the Page tab](#icons-in-the-page-tab)
35
-
* [Group files by folder or as a flat list](#group-files-by-folder-or-as-a-flat-list)
36
-
37
-
* [Save and Undo](#save-and-undo)
38
-
* [Find and Replace](#find-and-replace)
39
-
* [Showing the changes you made](#showing-the-changes-you-made)
40
-
* [Changes inside a function take effect](#changes-inside-a-function-take-effect) -->
30
+
*[The Navigator, Editor, and Debugger panes](#the-navigator-editor-and-debugger-panes)
31
+
*[Using the Navigator pane to select files](#using-the-navigator-pane-to-select-files)
32
+
*[Using the Page tab to explore resources that construct the current webpage](#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage)
33
+
* [Icons in the Page tab](#icons-in-the-page-tab)
34
+
* [Group files by folder or as a flat list](#group-files-by-folder-or-as-a-flat-list)
35
+
*[Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk)
36
+
*[Using the Overrides tab to override server files with local files](#using-the-overrides-tab-to-override-server-files-with-local-files)
37
+
*[Using the Content scripts tab for Microsoft Edge extensions](#using-the-content-scripts-tab-for-microsoft-edge-extensions)
38
+
*[Using the Snippets tab to run JavaScript code snippets on any webpage](#using-the-snippets-tab-to-run-javascript-code-snippets-on-any-webpage)
39
+
*[Using the Command Menu to open files](#using-the-command-menu-to-open-files)
40
+
*[Using the Editor pane to view or edit files](#using-the-editor-pane-to-view-or-edit-files)
41
+
*[Editing a JavaScript file](#editing-a-javascript-file)
42
+
* [Save and Undo](#save-and-undo)
43
+
* [Find and Replace](#find-and-replace)
44
+
* [Showing the changes you made](#showing-the-changes-you-made)
45
+
* [Changes inside a function take effect](#changes-inside-a-function-take-effect)
46
+
*[Reformatting a minified JavaScript file with pretty-print](#reformatting-a-minified-javascript-file-with-pretty-print)
47
+
*[Mapping minified code to your source code to show readable code](#mapping-minified-code-to-your-source-code-to-show-readable-code)
48
+
*[Transformations from source code to compiled front-end code](#transformations-from-source-code-to-compiled-front-end-code)
49
+
*[Editing CSS](#editing-css)
50
+
* [Editing CSS by using the Styles tab in the Elements tool, when using the Workspace tab of the Sources tool](#editing-css-by-using-the-styles-tab-in-the-elements-tool-when-using-the-workspace-tab-of-the-sources-tool)
51
+
* [The Page tab or Workspace tab in the Sources tool](#the-page-tab-or-workspace-tab-in-the-sources-tool)
52
+
*[Editing an HTML file](#editing-an-html-file)
53
+
*[Going to a line number or function](#going-to-a-line-number-or-function)
54
+
*[Quick source tool, to display source files when using a different tool](#quick-source-tool-to-display-source-files-when-using-a-different-tool)
55
+
*[Using the Debugger pane to debug JavaScript code](#using-the-debugger-pane-to-debug-javascript-code)
56
+
*[The basic approach to using a debugger](#the-basic-approach-to-using-a-debugger)
57
+
*[Advantages of the debugger's Watch and Scope over console.log](#advantages-of-the-debuggers-watch-and-scope-over-console.log)
58
+
*[Debug from Visual Studio Code directly](#debug-from-visual-studio-code-directly)
59
+
*[Articles about debugging](#articles-about-debugging)
0 commit comments