网站目录 整理网站建设医药

网站目录 整理,网站建设医药,wordpress外链页面,用qq空间做网站在移动互联网时代#xff0c;移动端网页开发的需求日益增长。然而#xff0c;与桌面端开发不同#xff0c;移动端网页的调试面临着诸多挑战。由于移动设备的屏幕尺寸、操作系统和浏览器环境的多样性#xff0c;传统的桌面端调试工具难以直接应用于移动端。Eruda作为一款轻量…在移动互联网时代移动端网页开发的需求日益增长。然而与桌面端开发不同移动端网页的调试面临着诸多挑战。由于移动设备的屏幕尺寸、操作系统和浏览器环境的多样性传统的桌面端调试工具难以直接应用于移动端。Eruda作为一款轻量级、功能强大的移动端网页调试工具为开发者提供了便捷的调试解决方案。它可以在移动设备上模拟桌面端浏览器的开发者工具帮助开发者快速定位和解决问题。接下来我们将深入了解Eruda的各个方面。Eruda概述什么是ErudaEruda是一个开源的移动端网页调试工具它以插件的形式嵌入到网页中为开发者提供了类似于桌面端浏览器开发者工具的功能。Eruda支持多种常见的调试功能如控制台日志输出、元素查看、网络请求监控、性能分析等。通过Eruda开发者可以在移动设备上直接对网页进行调试无需连接电脑或使用复杂的调试设备。请扫描二维码或在手机上直接访问https://eruda.liriliri.io/如果想在其它页面尝试请在浏览器地址栏上输入以下代码javascript:(function () { var script document.createElement(script); script.srchttps://cdn.jsdelivr.net/npm/eruda; document.body.append(script); script.onload function () { eruda.init(); } })();Eruda的特点轻量级Eruda的体积非常小不会对网页的性能产生明显影响。它可以在不增加过多资源消耗的情况下为开发者提供强大的调试功能。易用性Eruda的使用非常简单只需要在网页中引入相应的脚本文件即可在移动设备上打开调试面板。调试面板的操作界面简洁直观易于上手。插件化Eruda采用插件化的架构支持多种插件扩展。开发者可以根据自己的需求选择不同的插件扩展调试功能。例如有专门用于查看Cookie信息的插件、用于查看本地存储的插件等。兼容性Eruda支持多种主流的移动浏览器包括Chrome、Safari、Firefox等。无论用户使用何种移动设备和浏览器都可以使用Eruda进行调试。功能清单按钮拖拽面板透明度大小设置。Console 面板捕获 Console 日志支持 log、error、info、warn、dir、time/timeEnd、clear、count、assert、table支持占位符包括 %c 自定义样式输出支持按日志类型及正则表达式过滤支持 JavaScript 脚本执行。Elements 面板查看标签内容及属性查看应用在 Dom 上的样式支持页面元素高亮支持屏幕直接点击选取查看 Dom 上绑定的各类事件。Network 面板捕获请求查看发送数据、返回头、返回内容等信息。Resources 面板查看并清除 localStorage、sessionStorage 及 cookie查看页面加载脚本及样式文件查看页面加载图片。Sources 面板查看页面源码格式化 htmlcssjs 代码及 json 数据。Info 面板输出 URL 及 User Agent支持自定义输出内容。Snippets 面板页面元素添加边框加时间戳刷新页面支持自定义代码片段。快速上手通过CDN使用script src//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js/script scripteruda.init();/script通过 npm 安装npm install eruda --save在页面中加载脚本script srcnode_modules/eruda/eruda.js/script scripteruda.init();/scriptJS 文件对于移动端来说略重gzip 后大概 100kb。建议通过 url 参数来控制是否加载调试器比如;(function () { var src //cdn.jsdelivr.net/npm/eruda; if (!/erudatrue/.test(window.location) localStorage.getItem(active-eruda) ! true) return; document.write(scr ipt src src /scr ipt); document.write(scr ipteruda.init();/scr ipt); })();如果你使用的是现代 JavaScript 技术栈可以像下边这样动态引入。if (import.meta.env.MODE development) { import(eruda).then(eruda eruda.default.init()); }初始化时可以传入配置container: 用于插件初始化的 Dom 元素如果不设置默认创建 div 作为容器直接置于 html 根结点下面。tool指定要初始化哪些面板默认加载所有。let el document.createElement(div); document.body.appendChild(el); eruda.init({ container: el, tool: [console, elements], useShadowDom: true });插件eruda-monitor: 展示页面的 fps 和内存信息。eruda-features浏览器特性检测。eruda-timing展示性能资源数据。eruda-code运行 JavaScript 代码。eruda-benchmark运行 JavaScript 性能测试。eruda-geolocation测试地理位置接口。eruda-orientation测试重力感应接口。eruda-touches可视化屏幕 Touch 事件触发。eruda-vueVue 调试工具。vite中使用一个 Vite 插件用于在构建过程中将 eruda 注入到您的项目中。用法npm install --save-dev zhaojjiang/vite-plugin-eruda npm install erudavite.configplugins: [ condition pluginEruda(options) ],import eruda from zhaojjiang/vite-plugin-eruda; const isEruda process.env.NODE_ENV development plugins: [ isEruda pluginEruda(options) ],选项启用布尔值 - 默认值true。您应该在插件外部控制它。选项erudaOptions输入方式字符串 | 字符串数组 - 默认值[src/main.ts, src/main.js]。绝对路径或相对于 Vite 配置根目录的相对路径。