Adds DevTools docs #16264
Adds DevTools docs #16264
Conversation
github-actions
bot
assigned GregBrimble, irvinebroque, kodster28, rohinlohe and WalshyDev
Deploying cloudflare-docs with
|
| Latest commit: |
a438089
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d3eba3fe.cloudflare-docs-7ou.pages.dev |
| Branch Preview URL: | https://mikenomitch-devtools-docs.cloudflare-docs-7ou.pages.dev |
|
@hyperlint review |
![hyperlint-ai[bot]](https://avatars.githubusercontent.com/in/718456?s=60&v=4){kind=small}
There was a problem hiding this comment.
breakpoints.mdx review details
Document Structure Review
Review Document Structure Review only runs on added files.
Link Check
We found 1 broken links.
Broken Links
- There's a link to
https://code.visualstudio.com/docs/editor/debugging#_global-launch-configuration(link text is: official VS Code documentation) that gave a status code of 500.
Line Edit Problems/Proposals
Note: The following comments are grouped by line.
Line 28: "type": "node",
Issue(s):
- Major Issue - The term 'node' is used without explanation. It should be clarified what 'node' refers to.
Line 29: "request": "attach",
Issue(s):
- Major Issue - The term 'attach' is used without explanation. It should be clarified what 'attach' refers to.
Line 30: "port": 9229,
Issue(s):
- Minor Issue - The term 'port' is used without explanation. It should be clarified what 'port' refers to.
Line 31: "cwd": "/",
Issue(s):
- Minor Issue - The term 'cwd' is used without explanation. It should be clarified what 'cwd' refers to.
Line 32: "resolveSourceMapLocations": null,
Issue(s):
- Major Issue - The term 'resolveSourceMapLocations' is used without explanation. It should be clarified what 'resolveSourceMapLocations' refers to.
Line 33: "attachExistingChildren": false,
Issue(s):
- Major Issue - The term 'attachExistingChildren' is used without explanation. It should be clarified what 'attachExistingChildren' refers to.
Line 34: "autoAttachChildProcesses": false,
Issue(s):
- Minor Issue - The term 'autoAttachChildProcesses' is used without explanation. It should be clarified what 'autoAttachChildProcesses' refers to.
Line 35: "sourceMaps": true // works with or without this line
Issue(s):
- Major Issue - The term 'sourceMaps' is used without explanation. It should be clarified what 'sourceMaps' refers to.
Line 36: }
Issue(s):
- Minor Issue - The term 'true' is used without explanation. It should be clarified what 'true' refers to.
Reviews Performed
| Name | Ran | Comment |
|---|---|---|
| Style Guide Review | ✅ | No style guide issues found. |
| Line Edit Review | ✅ | |
| Document Structure Review | ❌ | Doesn't run on renamed files. |
| Link Check Review | ✅ |
cpu-usage.mdx review details
Document Structure
-
High-level summary: This document aims to teach readers how to use DevTools to profile CPU usage in Cloudflare Workers, in order to identify performance bottlenecks and avoid hitting CPU limits.
-
What works well: The document has a clear and logical structure. It explains the importance of profiling CPU usage, provides step-by-step instructions for taking a profile, and includes an example that illustrates how to interpret the results and find CPU-intensive code. The code snippets and screenshots are helpful for understanding the concepts.
-
Areas for improvement:
-
Introduction: The "Example Profiling" section could benefit from a brief introductory sentence to better transition from the previous section and clarify the purpose of the example.
-
Content Quality: There are a few spelling errors (e.g. "vizualize" instead of "visualize") that should be corrected.
-
Relevance: The last paragraph in the "Example Profiling" section discusses memory optimization, which seems tangential to the main topic of CPU profiling. Consider removing this to maintain a tighter focus.
-
Conclusion: Adding a brief concluding paragraph could help reinforce the key takeaways and provide links to additional resources for readers who want to learn more.
Overall, this is a well-structured and informative document. With a few targeted improvements around the example section, proofreading, and conclusion, it will be even stronger.
Link Check
Looks good to me! No broken or malformed links found.
Line Edit Problems/Proposals
🌟! No line edits from me - nice work!
Reviews Performed
| Name | Ran | Comment |
|---|---|---|
| Style Guide Review | ✅ | No style guide issues found. |
| Line Edit Review | ✅ | |
| Document Structure Review | ✅ | |
| Link Check Review | ✅ |
index.mdx review details
Document Structure
-
This document provides an overview of using Cloudflare's implementation of Chrome DevTools to debug Cloudflare Workers code locally. It covers how to access the tools and key use cases like debugging, CPU profiling, and memory profiling.
-
The introduction and use cases sections provide a helpful high-level overview of the purpose and capabilities of the DevTools for Workers development. The instructions for opening DevTools locally are clear and specific.
-
Potential areas for improvement:
- Introduction: The note distinguishing between backend Worker code and client-side JS could be moved up to the introduction to provide that context upfront before diving into details.
- Opening DevTools: The alternative methods of accessing DevTools via the Cloudflare Dashboard and Playground could use more details or links to relevant docs for those options.
- Related Resources: The related resources section could be expanded beyond just local development to include other relevant topics like general debugging guides or other observability tooling to help developers.
Link Check
We found 1 broken links.
Broken Links
- There's a link to
https://dash.cloudflare.com/(link text is: Cloudflare Dashboard) that gave a status code of 403.
Line Edit Problems/Proposals
Note: The following comments are grouped by line.
Line 11: When running your Worker locally using wrangler dev, you automatically have access to Cloudflare's implementation of Chrome's DevTools. This provides a wide variety to tools to help you debug your Worker when it is not running correctly.
Issue(s):
- Minor Issue - The phrase 'a wide variety to tools' should be corrected to 'a wide variety of tools'.
Line 19: To get started, run your Worker in development mode with wrangler dev, then open the DevTools by hitting d from within you terminal. This will open the DevTools in a browser window. Now, when you access your worker locally, it can be debugged and profiled via this DevTool instance.
Issue(s):
- Minor Issue - The phrase 'from within you terminal' should be corrected to 'from within your terminal'.
Reviews Performed
| Name | Ran | Comment |
|---|---|---|
| Style Guide Review | ✅ | No style guide issues found. |
| Line Edit Review | ✅ | |
| Document Structure Review | ✅ | |
| Link Check Review | ✅ |
memory-usage.mdx review details
Document Structure
-
Summary: This document is a technical guide that teaches developers how to profile memory usage in Cloudflare Workers using Chrome DevTools to identify and fix memory leaks and optimize their Workers.
-
What works: The document has a clear introduction that explains the importance of the topic, and the step-by-step instructions with an example make it easy to follow along and understand the process.
-
Areas for improvement:
- "An Example Snapshot": This section blends in with the "Taking a snapshot" section. Consider adding a subheading to clearly separate the example from the instructions.
- Example code explanation: The example code could be explained more thoroughly, especially the part where the memory leak is introduced, to ensure readers fully understand how the leak occurs.
- "Additional Resources": This section provides useful links but is a bit hidden at the bottom. Consider moving it up to its own main heading to make it more prominent and easier to find.
Overall, the document is well-structured and provides valuable information. With a few minor adjustments to the organization and explanations, it can be even more effective in helping developers profile memory usage in their Workers.
Link Check
Looks good to me! No broken or malformed links found.
Line Edit Problems/Proposals
Note: The following comments are grouped by line.
Line 10: errors when hitting Worker memroy limits, and fixing memory leaks.
Issue(s):
- Minor Issue - The word 'memroy' is misspelled.
Line 19: hitting d from within you terminal. This will open the DevTools in a browser window.
Issue(s):
- Minor Issue - The phrase 'from within you terminal' is grammatically incorrect.
Line 51: navigate o the "Memory" tab.
Issue(s):
- Minor Issue - The word 'o' is misspelled.
Line 73: then inadvertantly overwriting the global variable with an increasingly large replacement string:
Issue(s):
- Minor Issue - The word 'inadvertantly' is misspelled.
Reviews Performed
| Name | Ran | Comment |
|---|---|---|
| Style Guide Review | ✅ | No style guide issues found. |
| Line Edit Review | ✅ | |
| Document Structure Review | ✅ | |
| Link Check Review | ✅ |
src/content/docs/workers/observability/dev-tools/memory-usage.mdx
Outdated
Show resolved
Hide resolved
src/content/docs/workers/observability/dev-tools/memory-usage.mdx
Outdated
Show resolved
Hide resolved
src/content/docs/workers/observability/dev-tools/memory-usage.mdx
Outdated
Show resolved
Hide resolved
src/content/docs/workers/observability/dev-tools/memory-usage.mdx
Outdated
Show resolved
Hide resolved
|
I have completed the review of the pull request. Here are the results: Files Reviewed
Summary of Reviews
|
mikenomitch
force-pushed
the
mikenomitch/devtools-docs
branch
from
3733bf1 to
acb1a76
Compare
mikenomitch
requested review from
rohinlohe,
a team,
tanushree-sharma,
GregBrimble and
WalshyDev
as code owners
Fixes typos Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>
mikenomitch
force-pushed
the
mikenomitch/devtools-docs
branch
from
7f38fa4 to
42c6fdc
Compare
Summary
We have the ability to use DevTools but our documentation and discoverability aren't great. This adds documentation as a first step towards making users more likely to use DevTools.
This adds a new DevTools section with an overview, a breakpoints section (repurposed from an existing page), a CPU profiling section, and a Memory profiling section.
Still have a few To Dos before merging this:
After this PR, there are some other changes we should make:
Screenshots (optional)
Coming Soon
Documentation checklist