企业官网建设流程全解析

263企业邮箱登录官网,seo经理,做一个平面网站的成本,淮南服装网站建设地址DevTools是Web测试时每天都要用的工具#xff0c;它提供了很多调试功能#xff0c;可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集#xff0c;很多功能并没用到过。 作为高频使用的工具#xff0c;还是有必要好好掌握的。测试时在日常工作中提BUG…DevTools是Web测试时每天都要用的工具它提供了很多调试功能可以帮助我们更好的定位问题。而我们平时使用的功能只是它全部功能的子集很多功能并没用到过。作为高频使用的工具还是有必要好好掌握的。测试时在日常工作中提BUG时如果能提供有用的信息给到开发工程师可以降低和开发工程师之间的沟通成本巧用开发者工具也能间接体现自身具备一定的技术专业性所以今天就分享Chrome Devtools 的常用功能一 认识 Devtools1、Devtools的用处大体来说Devtools对于不同人员来说有如下作用前端开发开发预览、远程调试、性能调优、Bug跟踪、断点调试等后端开发网络抓包、开发调试Response测试服务端API数据是否正确、审查页面元素样式及布局、页面加载性能分析、自动化测试其他安装扩展插件如AdBlock、Gliffy、Axure等2、Devtools功能拆解首先打开Devtools在 Chrome 菜单中选择更多工具 → 开发者工具在页面元素上右键点击选择检查Windows: ctrl shift iMac: cmd option i我们在平时工作中主要用到以下8个功能Elements 页面dom元素Console 控制台Sources 页面静态资源Network 网络Performance 设备加载性能分析Application 应用信息PWA/Storage/Cache/FramesSecurity 安全分析Audits 审计自动化测试工具不同浏览器的“开发者工具”在界面上会有差异但功能基本一致。掌握某种浏览器的用法后便可以操作其他浏览器。二 Devtools 8个常用面板1、Elements元素使用Elements元素面板可以自由操作 DOM 和 CSS 来迭代布局和设计页面。查看网页所有元素的代码和属性。可以在Elements标签直接手动修改任一元素的属性和样式修改后能立即在浏览器里面得到反馈。检查和调整页面编辑样式编辑 DOM2、Console控制台在开发期间可以使用Console控制台面板记录诊断信息查看JavaScript对象、查看调试日志信息或异常信息。通常控制台有JS报错直接找到前端开发再由前端开发根据具体问题进行调试并解决问题。使用控制台面板命令行交互3、Sources源代码Sources也称之为资源当前打开的网页页面所涉及到的所有源代码都会出现在该栏目包括样式、css、图片、js文件等。在源代码面板中设置断点来试 JavaScript 或者通过 Workspaces 工作区连接本地文件来使用开发者工具的实时编辑器断点调试调试混淆的代码使用开发者工具的 Workspaces 工作区进行持久化保存4、Network使用Network网络面板了解请求和下载的资源文件并优化网页加载性能。查看网络信息包括请求地址、Status响应状态码、Type响应数据类型、Size响应数据大小、Time响应时间以及Waterfall重要相关区域的请求耗时也可以筛选出不同数据类型的URL。网络面板基础了解资源时间轴网络带宽限制主要记录前端往服务器发的所有的http请求信息每个请求发送了什么数据服务器是否正常响应请求如果响应请求在Network标签下看到响应状态码、响应数据等。5、 Performance性能分析Performance记录和查看网站生命周期内发生的各种事件提高页面的运行时性能。6、Memory内存Memory内存面板主要用于跟踪内存泄漏JavaScript CPU 分析器内存堆区分析器7、Application 应用信息Application用于检查加载的所有资源IndexedDB 与 Web SQL本地和会话存储 cookie应用程序缓存图像字体和样式表8、Security安全分析Security主要用于证书问题安全相关问题三 、Devtools高频用途接下来我们再来学一些常用的小技巧吧都是一看就会的那种相信大家平时工作中有所接触。1、调整Devtools位置点击Dock Side可以调整开发者工具的位置4个图标分别对应1将开发者工具独立窗口2停靠于左侧3停靠于底部4停靠于右侧如果是测试移动端例如H5采用左/右布局会比较方便如果是测试Web端问题采用底部布局会比较方便。2、定位前后端Bug分析一个BUG是属于前端还是后端通常看两个标签Console控制台、Network网络。例如1点击某个按钮页面没有任何反应在Console控制台处看到有看到js错误。在Network网络处没有看到前端对后端的功能接口发起调用即点击按钮时没有看到返回数据大多数情况下这个BUG属于前端。2点击某个按钮页面没有任何反应在Console控制台处看到没有js错误。在Network网络处看到请求返回的状态码是500。此时可以判断这个BUG是后端导致的可以知道后端开发直接解决问题。常见的状态码200、404、500作为测试基本了解。3、查看/编辑元素点击Devtools的【箭头】或者使用快捷键CtrlShiftC进入选择元素模式在页面中选择需要查看的元素就可以在开发者工具Elements标签处直接定位到该元素源代码的具体位置 。可以修改字体的大小、颜色、背景色以及图片的高度、宽度等等刷新页面之后就会恢复原状。例如在日常工作中希望调整一下某个页面的字体颜色可以自行在Elements做调整调整后可以在浏览器立即看到效果。当知道需要如何调整之后再将相关信息给到UI设计师/前端开发从而避免反复调整。4、移动端适配点击的Devtools【手机图标】或者使用快捷键CtrlShiftM可以换成模拟移动端浏览的状态。可选择不同型号手机以及不同的分辨率样式来查看页面从而观察页面在不同手机、不同分辨率下的显示效果。5、下载图片/视频在日常搜索图片时如果存在某张图片不支持直接保存可以通过“开发者工具”进行保存。点击F12再打开对应的页面选择【Network】再选择【Img】能想要保存的图片双击或者直接复制URL打开对应的网址就可以下载图片。最后作为一位过来人也是希望大家少走一些弯路在这里我给大家分享一些软件测试的学习资料这些资料希望能给你前进的路上带来帮助。​视频文档获取方式这份文档和视频资料对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库这个仓库也陪伴我走过了最艰难的路程希望也能帮助到你以上均可以分享点下方小卡片即可自行领取。