Chrome 开发者工具-Web开发和调试工具_前端开发者

前端开发者丨Web开发开发

https:www.rokub.com

Chrome 开发者工具Chrome 开发者工具是一套内置在Google Chrome中web开发和调试工具。使用开发者工具来重演,调试和剖析您的网站。注意:寻找最新版本的Chrome 开发者工具,Chrome Canary总是有最新的DevTools。打开Chrome 开发者工具在Chrome菜单中选择 更多工具 > 开发者工具 。> 。 在页面元素上右键点击,选择 “检查”。

前端开发者丨Web开发开发

https:www.rokub.com

使用快捷键 Ctrl+Shift+I (Windows) 或者 Cmd+Opt+I (Mac)。了解面板设备模式使用设备模式构建完全响应式,移动优先的网络体验。Elements(元素面板)使用“元素”面板可以通过自由操纵DOM和css来重演您网站的布局和设计。Console(控制台面板)在开发期间,可以使用控制台面板记录诊断信息。或者使用它作为 shell,在页面上与JavaScript交互。Sources(源代码面板)在“源代码”面板中,可以断点调试 JavaScript 。或者通过Workspaces(工作区)连接本地文件,使用开发者工具实时编辑。

Network(网络面板)使用“网络”面板了解请求和下载的资源文件,并优化您的网页加载性能。Timeline(时间轴面板)使用时间轴面板,可以通过记录录像提高页面的运行时性能。并探索网站生命周期内发生的各种事件。Profiles(分析面板)如果你需要比时间轴面板提供的更多信息,请使用“配置”面板,例如以跟踪内存泄漏。Application(资源面板)使用“资源”面板检查加载的所有资源,包括IndexedDB与web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。

Security(安全面板)使用安全面板调试混入内容问题,您的证书的安全隐患及更多。

前端开发者丨Web开发开发

https:www.rokub.com

» 本文来自:前端开发者 » 《Chrome 开发者工具-Web开发和调试工具_前端开发者》
» 本文链接地址:https://www.rokub.com/217.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!