mirror of
https://github.com/wuchangming/spy-debugger.git
synced 2025-12-08 19:05:49 +00:00
3a7fc8fd40
This series of changes introduces a wide range of improvements to your spy-debugger codebase, focusing on modernization, readability, maintainability, accessibility, and robustness.
Key changes include:
1. **JavaScript Modernization (src/):**
* Replaced all `var` declarations with `let` or `const`.
* Updated deprecated `Buffer` constructor to `Buffer.from()`.
* Removed `require('babel-polyfill')` from source code as it's likely unnecessary for modern Node.js versions.
* Refactored asynchronous operations in `src/index.js` and `src/weinre/weinreDelegate.js` from callbacks/Promise chains to use `async/await`, improving code clarity and simplifying control flow.
2. **HTML Template Enhancements (template/):**
* Added `lang` attributes to `<html>` tags for better accessibility.
* Improved accessibility of interactive elements:
* Added `aria-hidden="true"` to purely presentational icons.
* Added `role="button"` and `tabindex="0"` to `div` elements acting as buttons.
* Added accessible names (`aria-label`) to icon-only links (e.g., GitHub link).
* Added `title` attributes to `<iframe>` elements.
* Removed obsolete `frameborder="0"` attributes from iframes.
* Commented out an outdated `clear:both` div.
* In `template/wrap.html`, moved inline CSS to an external file (`template/wrap.css`) and inline JavaScript to an external file (`template/wrap.js`), improving code organization.
3. **Server-Side Logic and Error Handling:**
* Enhanced robustness of AnyProxy child process management in `src/proxy/spyProxy.js` (including timeouts and better exit/error handling).
* Created a new logging utility (`src/util/logger.js`) using the `colors` library for standardized and styled console output.
* Replaced deprecated `domain` error handling with `async/await try/catch` blocks in `src/weinre/weinreDelegate.js`.
* Integrated the new logger in `src/index.js` and `src/weinre/weinreDelegate.js`, improving consistency and clarity of log messages.
4. **Code Duplication Refactoring:**
* Created `src/util/portUtil.js` with a `findFreePort()` utility, now used in `src/proxy/externalChildProcess.js` and `src/weinre/weinreDelegate.js`.
* Created `src/util/sysUtil.js` with an `openUrlInBrowser()` utility, now used in `src/weinre/weinreDelegate.js`.
5. **Dependency Review and Initial Cleanup:**
* Removed `babel-polyfill` from `package.json` dependencies.
* **Identified Critical Concerns:**
* The bundled `buildin_modules/weinre` appears to use Express 3.x, which is severely outdated and has known security vulnerabilities. Apache Weinre itself is retired. This is a major security risk.
* Many other dependencies (e.g., `commander`, `colors`, `anyproxy`) are significantly outdated.
* The project uses the Babel 6 build system, which is outdated.
* The project is missing a lockfile (`package-lock.json` or `yarn.lock`).
* These critical dependency issues require manual developer intervention.
Overall, these changes aim to make the `spy-debugger` codebase more modern, secure, maintainable, and user-friendly. The most pressing remaining issue is the outdated and vulnerable bundled Weinre module.
76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
html,body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overscroll-behavior: none;
|
|
}
|
|
.container {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.control-bar {
|
|
padding-left: 3px;
|
|
height: 99%;
|
|
width: 3%;
|
|
display: inline-block;
|
|
}
|
|
.monitor {
|
|
display: inline-block;
|
|
height: 100%;
|
|
width: 95%;
|
|
}
|
|
.weinre-iframe, .anyproxy-iframe{
|
|
height: 99%;
|
|
width: 100%;
|
|
}
|
|
|
|
.control-bar-wrap{
|
|
height: 100%;
|
|
display: table;
|
|
}
|
|
.control-bar-container {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
border-right: #bbb4b4 2px solid;
|
|
}
|
|
.control-bar-btn {
|
|
text-align: center;
|
|
margin: 8px 4px;
|
|
padding: 20px 4px;
|
|
cursor: pointer;
|
|
border: #42b983 2px solid;
|
|
transition: background-color 0.5s, color 0.5s;
|
|
-moz-transition: background-color 0.5s, color 0.5s; /* Firefox 4 */
|
|
-webkit-transition: background-color 0.5s, color 0.5s; /* Safari 和 Chrome */
|
|
-o-transition: background-color 0.5s, color 0.5s;
|
|
}
|
|
.control-bar-btn.off:hover {
|
|
color: #ffffff;
|
|
background-color: #42b983;
|
|
border-radius: 5px;
|
|
|
|
}
|
|
.control-bar-btn.on {
|
|
color: #ffffff;
|
|
background-color: #42b983;
|
|
border-radius: 5px;
|
|
}
|
|
.control-bar-btn.off {
|
|
color: #42b983;
|
|
background-color: #ffffff;
|
|
border-radius: 5px;
|
|
}
|
|
.github-logo {
|
|
margin: auto;
|
|
width: 28px;
|
|
}
|
|
svg:hover {
|
|
fill: #111;
|
|
}
|
|
.options-btn {
|
|
margin: auto;
|
|
width: 28px;
|
|
top:10px;
|
|
}
|