• 不用更新服务器上的文件内容达到开发和调试JavaScript类型Web资源的两种方法


    我是微软Dynamics 365 & Power Platform方面的工程师/顾问罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面的微软最有价值专家(Microsoft MVP),欢迎关注我的微信公众号 MSFTDynamics365erLuoYong ,回复427或者20201215可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!

    Web资源(包括JavaScript类型的Web 资源)更改后一般需要更新Dynamics 365服务器上的Web 资源的内容,发布,刷新(或者强制刷新Ctrl + F5)来测试,这样稍显麻烦,有时候还需要一种场景就是尝试性更改,这时候如果能直接使用开发者本机上的JavaScript文件内容进行开发和调试就好了,今天就介绍两种方法。

    首先介绍使用Fiddler的方法,主要内容来自官方文档:Streamline JavaScript web resource development using Fiddler AutoResponder

    当然需要先安装好 Fiddler (我这里使用的是经典版本的Fiddler,现在有新版叫做 Fiddler Anywhere),然后打开 Tools > Options ... 

     确保 HTTPS 这个Tab下面的 Capture HTTPS CONNECTs 和 Decrypt HTTPS traffic 两个选线选中,如果弹出来要安装证书,确认即可,然后关闭 Options 窗口。

    可以通过 File > Capture Traffic 或者点击左下角的空白格来开始后者停止抓取网络请求。

    如果觉得抓取的网络请求太多,可以使用Filter,选中 Filters  这个Tab,选择 Show only the following Hosts 这个选项,然后输入Dynamics 365的域名,示例如下,更多信息参考 Fiddler的 Filters Reference

    看情况通过刷新页面(刷新的话有时候会直接利用本地缓存的JavaScript文件,此时可以通过F12打开开发者工具,在Network这个Tab中选中 Disable Cache后再刷新)或者点击按钮等方式触发事件执行要修改的JavaScript Web资源,抓取网络请求后在Fiddler上按Ctrl + F或者点击 Find 按钮,在弹出的Find Sessions窗口中输入要查找的Web 资源名字进行查找,就会找到要修改的文件,默认是标黄显示。

    选中要修改的文件后,在Fiddler的右边面板选择AutoResponder这个Tab,选中这个Tab下的Enable rules 和 Unmatched requests passthrough 这两个复选框。

    在左侧依然保持选中要修改的Web资源的情况下,点击右边AutoResponder面板中的 Add Rule 按钮,就会自动将内容填充到Rule Editor中,可以看到生成的内容类似 EXACT:https://logicalinventorycenter.crm5.dynamics.com/%7b637435477010026143%7d/webresources/ly_/scripts/workorder/workorder.js 。

    这里最好简化下,我这里简化为 webresources/ly_/scripts/workorder/workorder.js ,然后输入自己要替换用的本地文件路径和名字,点击 Save按钮。

     最后就是修改本地的Web资源代码,然后启动Fiddler继续抓取网络请求进行测试了。我这测试是OK的,不需要更新Dynamics 365上的Web资源内容,就替换成为本地的内容了。比如我这里是将提示加了一个AutoResponder,显示正确。

    下面介绍第二种方法,不需要借助第三方工具,利用Chrome后者新版Edge浏览器的Local Overrides功能即可,这个需要Chrome的版本等于高于65,Edge新版就可以,Edge的官方介绍文档是 Override webpage resources with local copies using Microsoft Edge DevTools ,Google官方介绍链接是 https://developers.google.com/web/updates/2018/01/devtools#overrides 。工作原理官方介绍如下,我就不翻译了:

    How it works:

    • You specify a directory where DevTools should save changes.
    • When you make changes in DevTools, DevTools saves a copy of the modified file to your directory.
    • When you reload the page, DevTools serves the local, modified file, rather than the network resource.

    主要介绍下如何做,我是微软员工,我就使用微软的新版Edge浏览器来介绍和演示。按F12或者通过其他方式打开Developer Tools工具,打开Sources这个面板下面的 Overrides 这个Tab。

      

    点击 Select folder for overrides ,选择合适的文件夹(我一般会专门建立一个文件夹来处理),如果有提示,点击Allow。

     然后通过Ctrl + P 或者如下菜单项目(Sources > Open file)找到要修改的JavaScript文件,我这里是 workorder.js 

     右击该文件,选择 Save for overrides 菜单项目,然后可以直接修改,使用Ctrl + S保存后刷新页面就会利用修改后的文件了。但是这个文件保存的路径比较绕,一般我会和自己的代码做个映射。

      

    这个文件到底保存在哪儿呢?可以点击 Open in containing foloder 来查看,比如我这里是保存在 D:BrowserOverrideslogicalinventorycenter.crm5.dynamics.com\%257b637435477010026143%257dwebresourcesly_scriptsworkorder 文件夹中。

     这种文件夹路径太长,我想映射这个文件到我的源码中,可以用mklink做个映射。用管理员身份打开cmd窗口,我这里执行如下命令:

    cd /d d:
    cd D:BrowserOverrideslogicalinventorycenter.crm5.dynamics.com\%257b637435477010026143%257dwebresourcesly_scriptsworkorder
    del workorder.js
    mklink /h workorder.js D:CodesThomasLuoCRMCRM.WebResourcesscriptsworkorderworkorder.js

    执行结果如下:

     然后我修改下本地JavaScript的内容(也就是 D:CodesThomasLuoCRMCRM.WebResourcesscriptsworkorderworkorder.js 这个文件内容),比如我这里是将提示最后文字从AutoResponder改成Overrides。

    然后刷新浏览器看看效果,有了,当然需要保持Developer Tools是打开状态。

    当然,如果要停止这种方法也很简单,点击如下按钮即可。

    你可能会问,只适用于JavaScript类型的Web资源吗?经过验证,HTML类型的Web资源也可以的,应该静态文件几乎都可以。

  • 相关阅读:
    【转】 Pro Android学习笔记(四十):Fragment(5):适应不同屏幕或排版
    【转】 Pro Android学习笔记(三九):Fragment(4):基础小例子-续
    【转】MEAN:Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog
    handlebars中的partial
    jquery源码分析
    数据库:MySQL索引背后的数据结构及算法原理【转】
    nginx做rails项目web服务器缓存配置方法
    浏览器刷新的三种方式
    【转】火狐浏览器中firebug插件的时间线域解释
    Rails:rails链接多个数据库【转】
  • 原文地址:https://www.cnblogs.com/luoyong0201/p/Dynamics_365_streamline_javascript_development_by_fiddler_autoresponder_or_browser_overrides.html
Copyright © 2020-2023  润新知