devtools-frontend
shopify-theme-inspector
| devtools-frontend | shopify-theme-inspector | |
|---|---|---|
| 7 | 2 | |
| 2,983 | 153 | |
| 1.0% | 0.0% | |
| 10.0 | 3.4 | |
| 6 days ago | 17 days ago | |
| TypeScript | TypeScript | |
| BSD 3-clause "New" or "Revised" License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
devtools-frontend
-
Curl 8.0.1 because I jinked it
You can paste that curl command into https://curlconverter.com/wget/ to turn it into a Wget command.
> The reason there isn't a "Copy as wget" option, I think, is the level of control that curl allows so the request can be tailored to exactly mimic the browser.
This is not true. You can read the code that generates the curl command and it's pretty straightforward:
https://github.com/ChromeDevTools/devtools-frontend/blob/c9a...
The arguments it uses are --url, --data-raw, -X/--request, -H/--header, --compressed and --insecure, all of which Wget has an analog of. I think the reason is that they don't care to do it and/or they don't want to make that dropdown menu 30 entries long.
- Architecture and guiding principles of Chrome DevTools
-
Why you should check-in your node dependencies
The GitHub mirror of the Chrome DevTools repo has the node_modules folder here: https://github.com/ChromeDevTools/devtools-frontend/blob/mai...
But there is nuance (there always is...), the README file in node_modules is here: https://github.com/ChromeDevTools/devtools-frontend/blob/mai... - and it makes it clear the only NPM dependencies used by the build-system or infrastructure is meant to be checked-in. Other NPM packages should not.
----------
In conclusion: the linked blog-article is clickbait that misrepresents how the Chrome team manages their dependencies.
While you are correct about Google's monorepository, the author works on Chrome DevTools. That repository is open-source and standalone: https://github.com/ChromeDevTools/devtools-frontend
-
Debugging tools, branching strategies and many more resources
What's new in DevTools (Chrome 95).
-
Show HN: Run puppeteer scripts from the Browser, open DevTools on remote pages
2 known issues:
- DevTools doesn't display the viewport. I'm not sure if this is due to a change in the latest Chrome to which I just updated (~90) or because I broke my serving of it by updating it. A workaround will be serving a static snapshot of the devtools front-end rather than just (simply, as I'm doing right now) pulling it out of Chrome's RDP endpoint each time. This may take some time to do.
- DevTools doesn't seem to work on iOS (as I've tested it, Safari or Chrome).
- There are many more issues, and a lot, but not all, of them are edge cases but they'll be fixed eventually.
More bug reports, UI/UX tips and advice, and other feedback are very welcome! Unfortunately the whole app is not open source but some parts are open source, namely, the virtualized browser[0], and the devtools-front-end[1].
[0]: https://github.com/i5ik/ViewFinderJS
[1]: https://github.com/ChromeDevTools/devtools-frontend
shopify-theme-inspector
-
Help! Shopify Speed Optimization
Shopify Theme Inspector - a Chrome extension made & maintained by Shopify. This will help you identify liquid-specific performance issues your theme may have. In my experience, liquid is low-hanging fruit for Shopify web opt.
-
Tips on how to optimize your store, if you are familiar with code
Know and profile your liquid. Each executed liquid tag adds ~1ms to TTFB. High TTFB is a seriously awful UX. With a poorly designed liquid for-loop, you can easily get into multiple seconds of TTFB.
What are some alternatives?
remotedebug-ios-webkit-adapter - Debug Safari and WebViews on iOS from tools like VS Code and Chrome DevTools
mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
ViewFinderJS - :camera: ViewFinder - Remote isolated browser API for security, automation visibility and interactivity. RBI. CBII. Remote browser isolation, embeddable BrowserView, secure chrome-as-a-service. Managed, variable bandwidth and co-browsing options available in Pro versions. Like S2, WebGap, Bromium, Authentic8, Menlo Security and Broadcom, but free and open-source. Integrated secure document viewing with CDR from https://github.com/dosyago/p2%2e [Moved to: https://github.com/i5ik/ViewFinder]
jsx-lite - Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid. [Moved to: https://github.com/BuilderIO/mitosis]
cli - the package manager for JavaScript
depclean - DepClean automatically detects and removes unused dependencies in Maven projects (https://dx.doi.org/10.1007/s10664-020-09914-8)
Vue Storefront - Alokai is a Frontend as a Service solution that simplifies composable commerce. It connects all the technologies needed to build and deploy fast & scalable ecommerce frontends. It guides merchants to deliver exceptional customer experiences quickly and easily.
git-archive-all - git-archive with recursive submodule support
go-offline-maven-plugin - Maven Plugin used to download all Dependencies and Plugins required in a Maven build, so the build can be run without an internet connection afterwards.
jQuery-File-Upload - File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.