2012年12月2日

Visual Studio - 超強的程式碼分析功能Code Map

老實說,這次Visual Studio 2012 Update 1 更新,最吸引到我的東西就是Code Map ( 好吧,其他功能小弟我也還沒好好的使用過XDD ),但不管怎樣,Code Map真的值得特別拿一篇出來講一下,雖然可能沒辦法把全部功能講完,但至少透過下面這個例子,就可以感受到Code Map的強大;而且Visual Studio 2012 Update 1的更新,也是中文版的,我想,大家亂用亂用XDD,應該也可以實驗出不錯的心得,所以這篇只是簡單的介紹入門,詳細的分析和應用,就交給各位前輩補齊了 ( 逃~ )。喔,對了,這個Code Map不是2012擴充套件的Code Map喔…是微軟Visual Studio 2012 Update 1提供的新功能。

首先,甚麼是Code Map?,如果懶得看這篇文章的人,也可以直接看官方的影片;簡單的說,這個工具類似反向工具一樣,可以幫我們把想要看的Class關係、Function關係,用圖表關聯起起來,甚至還可以點兩下後,快速的尋覽;用了此功能後,會更加地想要使用雙螢幕的衝動!?

廢話不多說,我們就稍微看一下Code Map的功能吧,例如下圖,我們可以看到,一個HomeController 繼承了 Controller ( 這裡是MVC專案,但小弟我這篇不會講到甚麼MVC的東西,只是簡單的使用MVC的檔案來介紹Code Map,所以大家不用擔心。 )

image

這時,如果我們在HomeController上面點滑鼠左鍵,就可以看到如下圖,在Code Map上顯示。

image

接下來,就會在旁邊的視窗,看到HomeController的圖案出現了,就如同神奇寶貝一樣,出現了!!

image

這時候,我們就可以叫這個神奇寶貝用技能,喔,不是,是在HomeController上按下滑鼠左鍵,我們就可以看到很多的選項,我們先選簡單的顯示基底類別。

image

這時候,我們的Code Map就會出現HomeController的基底型別"Controller",如下圖,就可以看到,真的和程式碼一模一樣!!( 好,我知道大家看到這邊,會想罵人XDD,因為這個連小弟我用程式碼都可以看的出來,HomeController是繼承於Controller,這有甚麼好畫出圖的… )

image

但實際上,就算是在HomeController裡面的ActionResult類別,也可以直接叫出選單,來產生Map喔!!( 但要注意,如果沒有加入MVC的Source Code,也會無法顯示出MAP,簡單的說,他是利用Source Code來產生,如果那個Class是已經被包在dll裡面,則會無法產生出來。 )

好吧,我承認,用尋覽的方式,還是可以跳到ActionResult的程式碼裡面( 如果有MVC Source Code的話 ),感覺上也還好,不夠炫。

image

我們這次回到HomeController的圖上,這次我們使用顯示這一項參考的型別。

image

這時候就比較有感覺了吧,我們可以從下圖看到,HomeController參考了那些Class,這時候,如果這個Class比較多東西,那我們就可以從此圖表一目了然!!,而如果選擇了"顯示參考這一項的型別",就會列出有使用到HomeController的Class喔!!

image

到這邊,有沒有覺得很方便!?,如果是以前,我們可能並須用Search的方式,然後整個一片大混亂,而現在,有圖表來幫我們顯示,而且點兩下圖表,就會自動跳到對應的程式碼喔!!

那這樣就結束了嗎??錯,連Function也可以;使用的方式一樣,我們也可以從Index()來產生出圖表。

image

甚至產生出這種圖表,都是自動產生的喔!!

image

那只能到Function嗎??錯,他的層級甚至到屬性喔!!連屬性的關係都可以搞出來,這真的是太強了!!

image

最後,完成的圖,當然可以寫註解;如果圖太亂,也可以利用Layout來調整;甚至可以直接利用電子郵件寄出,也支援存檔。

image

基本上就這樣嚕,基本上,用了之後,就會想使用雙螢幕,或是30吋的螢幕了…Orz…

後記

這個功能真的是太強大了,光是這個功能,就100%值得升級到Update 1,升級完的那天,小弟我用這個功能去debug,原本複雜的關係,一下子就釐清,一下子就把bug給修好,也就有更多的時間可以聊天,喔,不是,有更多的時間可以處理更多的bug了!!那麼好的東西,還不趕快去升級!!( 參考網址有Visual Studio 2012 Update 1的位置 )

參考網址

ASP.NET MVC - 使用ASP.NET MVC 4的原始碼進行除錯

當然,這篇也不是甚麼大新聞了,如果常追蹤一些前輩Blog的人,因該已經有很多類似的文章,例如黑暗大大保哥KKBruce哥Kevin哥,都寫得詳細到爆炸。

但是小弟基於自己筆記自己紀錄的立場XDD,所以還是稍微紀錄一下自己的過程。

首先,我們要先下載Source Code,可以到這邊下載

image

如果有使用Git的人,也可以使用Git來進行下載,沒使用Git的人可以跳過這段落,直接按上面的連結就可以,並直接跳過此段,看後面的步驟;如果有使用Git的人,我們可以使用以下命令,把Source Code下載回Local端。

git clone https://git01.codeplex.com/aspnetwebstack.git

而clone後面接的網址,可以從ASP.NET CodePlex專案的頁面得知。

image

下載完成後,我們要的專案,主要都在src這個目錄下。

image

接下來,我們就可以開一個專案,無論是要用空白專案範本,或是網際網路專案範本,或是現在開發中的專案 ( 只要心臟夠大顆的話= =+ )都可以來進行Trace;我們只要在要進行Trace的方案上面,使用加入現有專案。

image

主要準備加入的是以下五個專案:

  • System.Web.Mvc
  • System.Web.Razor
  • System.Web.WebPages
  • System.Web.WebPages.Deployment
  • System.Web.WebPages.Razor

不過,事情就是沒想想中的順利= =…

image

加入的時候,可能會碰到這個問題,主要是因為現在的MVC Source Code也有用到NuGet了,而且有使用到NuGet的套件還原功能,而目前我們準備的專案(MvcApplication2)還沒啟用此功能。錯誤訊息如下:

找不到匯入的專案 "c:\xxx\.nuget\nuget.targets"`。請確認<Import>宣告中的路徑正確,而且檔案存在磁碟上。c:\xxx\src\System.Web.Mvc\System.Web.Mvc.csproj

image

這時候,我們只要去方案的地方,啟用NuGet套件還原。

image

完成後,就可以看到NuGet.targets已經加上去了。

image

在一次,就可以順利加上去了。

image

接下來,我們要把MvcApplication2原本參考的dll移除,換上我們剛剛加的專案。( 因為MvcApplication2的參考太長,所以下圖是新開了一個MvcApplicaiton1的專案來解釋。 );一樣移除那五個。

image

接下來,我們把剛剛加入進來的專案,參考進來。

image

接下來,我們要修改View目錄底下的web.config。

image

原本是長這樣( web.config後面不重要的就省略了 )

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

而現在,我們要修改如下圖這四個地方,從逗點,把Version、Culture、PublicKeyToken通通移除。(最後面的引號要留下喔!!)

image

改完後,web.config變成這樣

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" 
                  type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, 
                  System.Web.WebPages.Razor">
      <section name="host" 
               type="System.Web.WebPages.Razor.Configuration.HostSection, 
               System.Web.WebPages.Razor" 
               requirePermission="false" />
      <section name="pages" 
               type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, 
               System.Web.WebPages.Razor" 
               requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, 
          System.Web.Mvc" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>
  </system.web.webPages.razor>

就如同下圖:

image

而之前MVC 3的時代,還需要修改根目錄的web.config,現在不用修改了;所以改到這邊就算完成了。

另外,如果打開任何一個View,可能會發現,有許多的小蚯蚓。

image

關於這個問題,保哥有在MSDN反映過,最簡單的方法,就是在每個View上Using進來,大家可以參考這篇

後記

其實和各個前輩所寫的內容大同小異,也很感謝之前就有很多前輩分享過,而最近剛好想看一下MVC 4的Source Code,所以也順便把MVC 4的Source Code使用過程簡單整理一下,也希望讓真的有遇到問題的人,可以節省尋找解法的時間。

參考網址