tento populární článek byl aktualizován v roce 2020. Pro více informací o zlepšení vašeho vývojového workflow pomocí nástrojů, přečtěte si vývojář Essentials: nástroje na SitePoint Premium.
typický den webového vývojáře zahrnuje vytváření webových stránek HTML s přidruženými CSS a JavaScript ve svém oblíbeném editoru. Pracovní postup:
- otevřete lokálně hostovanou stránku v prohlížeči.
- Přísahám.
- otevřete DevTools, abyste prozkoumali problémy s rozložením a funkčností.,
- vyladit HTML prvky, vlastnosti CSS a JavaScript kód opravit problémy.
- zkopírujte tyto změny zpět do editoru a vraťte se ke kroku #1.
zatímco nástroje jako live reloading tento proces usnadnily, mnoho vývojářů nadále vylepšuje kód jak v DevTools, tak v jejich editoru.
je však možné otevřít a upravit zdrojové soubory přímo v prohlížeči Chrome. Jakékoli změny, které provedete, jsou uloženy do systému souborů a aktualizovány v editoru (za předpokladu, že se obnoví, když dojde ke změnám souborů).,
Krok 1: Spusťte nástroje pro vývojáře
otevřete Chrome, načtěte stránku z místního systému souborů / serveru a otevřete Nástroje pro vývojáře z nabídky Více nástrojů nebo stiskněte klávesu F12 nebo Ctrl / Cmd + Shift + i v závislosti na vašem systému. Přejděte na kartu Zdrojů, aby přezkoumala file explorer:
můžete otevřít a upravit CSS a JavaScript soubory v tomto pohledu, ale nějaké změny budou ztraceny, jakmile si aktualizovat stránku.
Krok 2: přidružte složku k pracovnímu prostoru
klikněte na kartu souborový systém a poté klikněte na + Přidat složku do pracovního prostoru., Budete vyzváni k vyhledání pracovní složky a Chrome vás požádá o potvrzení, že povolíte přístup. Explorer zobrazí soubory na vašem systému, které lze otevřít jediným kliknutím:
Krok 3: Upravit a Uložit Váš Kód
nyní můžete skočit a upravit váš kód. Neuložené úpravy jsou označeny hvězdičkou na kartě Soubor.
CSS změny jsou okamžitě aktualizovány, ale v případě HTML a JavaScript, budete obvykle muset stisknout Ctrl/Cmd + S uložte soubor do systému souborů, pak aktualizujte prohlížeč.,
Všimněte si, že můžete také kliknout pravým tlačítkem myši na kartu Soubor a vybrat Uložit jako… pro uložení kopie souboru jinde.
Krok 4: Zkontrolujte a zrušte změny
Chcete-li zkontrolovat změny, klepněte pravým tlačítkem myši na kartu Soubor a vyberte místní úpravy… z kontextové nabídky:
zobrazí se pohled podobný diff. Ikona šipky v levém dolním rohu podokna vrátí všechny změny a vrátí soubor do původního stavu.,
nástroje pro vývojáře Chrome nikdy nebudou úplnou náhradou za váš oblíbený editor, ale mohou být užitečné, když provádíte rychlé změny nebo pracujete z jiného počítače, kde nemusí být nainstalován editor.