1. <object id="6odr3"></object>
      2. NEWS

        新聞資訊

        時刻保持對數字市場的敏銳及前瞻性

        昆明網站開發:提高做網站開發效率的工具有哪些

        運多多網絡 | 2019-11-01 14:45:52 | 分享至:
            我們知道做網站是一件比較復雜的事情,因為這涉及到方方面面的設計問題,導致開發網站的效率始終是上不去.如果借助一些工具來進行制作,那么效果會好很多.

            現在網上這類工具也是不少,其中比較熱門的就是Chrome開發者工具.該工具雖然熱門,但也有不少朋友們并不清楚這其中的一些使用技巧,現在就讓小編告訴大家吧.

         

            下面小編為您詳細介紹提高做網站效率的開發工具和Chrome開發者工具使用技巧.

         

            一、提高做網站效率的Web開發必備工具

         

            一直以為工欲善其事,必先利其器,喜歡看小說的朋友都知道,一般一些高手剛開始下手的時候,就要尋找自己的一些武器.

         

            就包括西游記的孫悟空也是一樣的,希望我們要成為做網站的高手,web開發的高手,也要找到一些適合自己的,自己喜歡的工具.

         

            1、FileZilla(Portable)

         

            FileZilla是一種快速、可信賴的FTP客戶端以及服務器端開放源代碼程式,具有多種特色、直覺的接口.

         

            2、Firebug

         

            Firebug是Firefox下的一款開發類插件,現屬于Firefox的五星級強力推薦插件之一.

         

            它集HTML查看和編輯、Javascript控制臺、網絡狀況監視器于一體,是開發JavaScript、CSS、HTML和Ajax的得力助手.

         

            Firebug如同一把精巧的瑞士軍刀,從各個不同的角度剖析Web頁面內部的細節層面,給Web開發者帶來很大的便利.

         

            3、ColorCop

         

            ColorCop是個非常優秀的多目標的顏色提取器,對開發者和設計師很有幫助.該工具非常簡單、易用.

         

            4、GIMP

         

            GIMP是GNU圖像處理程序(GNUImageManipulationProgram)的縮寫.包括幾乎所有圖象處理所需的功能,號稱Linux下的PhotoShop.

         

            GIMP在Linux系統推出時就風靡了許多繪圖愛好者的喜愛,它的接口相當輕巧,但其功能卻不輸于專業的繪圖軟件;它提供了各種的影像處理工具、濾鏡,還有許多的組件模塊.

         

            對于要制作一個又酷又炫的網頁按鈕或網站Logo來說是一個非常方便好用的繪圖軟件,因為它也提供了許多的組件模塊,你只要稍加修改一下,便可制作出一個屬于你的網頁按鈕或網站Logo.

         

            5、Xenu

         

            Xenu是一款深受業界好評,并被廣泛使用的死鏈接檢測工具.時常檢測網站并排除死鏈接,對網站的SEO非常重要,因為大量死鏈接存在會降低用戶和搜索引擎對網站的信任.

         

            6、Webbo

         

            Webbo是一個免費、開源的輕量級的Web開發工具,支持Windows系統.主要特性包括:靈活編輯、支持多種Web編程語言和服務器端技術、即時的頁面和服務器預覽等.

         

            7、BrowserShots

         

            Browsershots是個很好用的,開發者必須安裝的工具.它可以讓你檢測不同瀏覽器下網頁的樣式,即瀏覽器兼容性檢測工具.

         

            8、WebDeveloperToolbar

         

            WebDeveloperToolbar是個必須有的Firefox插件!他提供開發者一組工具,來幫助管理HTML和CSS.

         

            9、ProCSSor

         

            ProCSSor是個強大、免費的CSS美化工具,幫你格式化CSS,將你的CSS轉化成一些更佳的形式.

         

            10、WC3MarkupValidationService

         

            該驗證工具支持的格式包括HTML,XHTML,SMIL,MathML等的有效性驗證,如果你想驗證特定的內容,比如RSS/Atom種子或者CSS樣式,MobileOK內容或者找到壞鏈接.

         

            二、做網站調試之Chrome開發者工具使用技巧

         

            做網站的童鞋們都知道在Web開發者中,GoogleChrome是使用最廣泛的瀏覽器.六周一次的發布周期和一套強大的不斷擴大開發功能,使其成為了web開發者必備的工具.

         

            你可能已經熟悉了它的部分功能,如使用console和debugger在線編輯CSS.在這篇文章中,我們將分享15個有助于改進你的開發流程的技巧.

         

            1、快速切換文件

         

            如果你使用過sublimetext,那么你可能不習慣沒有Gotoanything這個功能的覆蓋.

         

            你會很高興聽到chrome開發者功能也有這個功能,當DevTools被打開的時候,按Ctrl+P(cmd+ponmac),就能快速搜尋和打開你項目的文件.

         

            2、在源代碼中搜索

         

            如果你希望在源代碼中搜索要怎么辦呢在頁面已經加載的文件中搜尋一個特定的字符串,快捷鍵是Ctrl+Shift+F(Cmd+Opt+F),這種搜尋方式還支持正則表達式哦

         

            3、快速跳轉到指定行

         

            在Sources標簽中打開一個文件之后,在Windows和Linux中,按Ctrl+G,(orCmd+LforMac),然后輸入行號,DevTools就會允許你跳轉到文件中的任意一行.

         

            另外一種方式是按Ctrl+O,輸入:和行數,而不用去尋找一個文件.

         

            4、在控制臺選擇元素

         

            DevTools控制臺支持一些變量和函數來選擇DOM元素:

         

            $()–document.querySelector()的簡寫,返回第一個和css選擇器匹配的元素.例如$('div')返回這個頁面中第一個div元素

         

            $$()–document.querySelectorAll()的簡寫,返回一個和css選擇器匹配的元素數組.

         

            $0-$4–依次返回五個最近你在元素面板選擇過的DOM元素的歷史記錄,$0是最新的記錄,以此類推.

         

            想要了解更多控制臺命令,戳這里:CommandLineAPI

         

            5、使用多個插入符進行選擇

         

            當編輯一個文件的時候,你可以按住Ctrl(cmdformac),在你要編輯的地方點擊鼠標,可以設置多個插入符,這樣可以一次在多個地方編輯.

         

            6、保存記錄

         

            勾選在Console標簽下的保存記錄選項,你可以使DevTools的console繼續保存記錄而不會在每個頁面加載之后清除記錄.

         

            當你想要研究在頁面還沒加載完之前出現的bug時,這會是一個很方便的方法.

         

            7、優質打印

         

            Chrome'sDeveloperTools有內建的美化代碼,可以返回一段最小化且格式易讀的代碼.PrettyPrint的按鈕在Sources標簽的左下角.

         

            8、設備模式

         

            對于開發移動友好頁面,DevTools包含了一個非常強大的模式,這個谷歌視頻介紹了其主要特點,如調整屏幕大小、觸摸仿真和模擬糟糕的網絡連接

         

            (ps:原文中這個視頻文件丟失了,這個圖是小編補充,你可以自己去測試這個工具,很有用)

         

            9、設備傳感仿真

         

            設備模式的另一個很酷的功能是模擬移動設備的傳感器,例如觸摸屏幕和加速計.

         

            你甚至可以惡搞你的地理位置.這個功能位于元素標簽的底部,點擊"showdrawer"按鈕,就可看見Emulation標簽-->Sensors.

         

            10、顏色選擇器

         

            當在樣式編輯中選擇了一個顏色屬性時,你可以點擊顏色預覽,就會彈出一個顏色選擇器.

         

            當選擇器開啟時,如果你停留在頁面,鼠標指針會變成一個放大鏡,讓你去選擇像素精度的顏色.

         

            11、強制改變元素狀態

         

            DevTools有一個可以模擬CSS狀態的功能,例如元素的hover和focus,可以很容易的改變元素樣式.在CSS編輯器中可以利用這個功能

         

            12、可視化的DOM陰影

         

            Web瀏覽器在構建如文本框、按鈕和輸入框一類元素時,其它基本元素的視圖是隱藏的.

         

            不過,你可以在Settings->General中切換成ShowuseragentshadowDOM,這樣就會在元素標簽頁中顯示被隱藏的代碼.甚至還能單獨設計他們的樣式,這給你了很大的控制權.

         

            13、選擇下一個匹配項

         

            當在Sources標簽下編輯文件時,按下Ctrl+D(Cmd+D),當前選中的單詞的下一個匹配也會被選中,有利于你同時對它們進行編輯.

         

            14、改變顏色格式

         

            在顏色預覽功能使用快捷鍵Shift+Click,可以在rgba、hsl和hexadecimal來回切換顏色的格式

         

            15、通過workspaces來編輯本地文件

         

            Workspaces是ChromeDevTools的一個強大功能,這使DevTools變成了一個真正的IDE.

         

            Workspaces會將Sources選項卡中的文件和本地項目中的文件進行匹配,所以你可以直接編輯和保存,而不必復制/粘貼外部改變的文件到編輯器.

         

            為了配置Workspaces,只需打開Sources選項,然后右擊左邊面板的任何一個地方,選擇AddFolderToWorskpace,或者只是把你的整個工程文件夾拖放入DeveloperTool.

         

            現在,無論在哪一個文件夾,被選中的文件夾,包括其子目錄和所有文件都可以被編輯.為了讓Workspaces更高效,你可以將頁面中用到的文件映射到相應的文件夾,允許在線編輯和簡單的保存.

         
        亚洲特黄特色一级在线观看_国产香港毛片免费观看_亚洲色图33p亚色图库_欧美亚洲日本另类

          1. <object id="6odr3"></object>