2013-05-19 13 views
37

Czy ktoś może mi powiedzieć, jak działa mapowanie obszaru roboczego narzędzi programistów Chrome. Uważam, że obecnie jest dostępny tylko na Wyspach Kanaryjskich.Szablony mapowania obszaru roboczego narzędzi programistów Chrome

Pomyślałem, że to powinno umożliwić mi wprowadzenie zmian w regułach CSS w widoku elementów i automatyczne ich zapisanie w lokalnych plikach, co wykazał Paul Irish w Google IO 2013. Nie mogę uzyskać tej funkcji praca.

https://developers.google.com/events/io/sessions/325206725

Odpowiedz

54

To działa tylko w kanarka w tej chwili.

EDIT: Teraz w Chrome (od ver 30+)

1) trzeba otworzyć panel ustawień DevTools. Ma sekcję "Przestrzeń robocza".

Screenshot of settings page

2) w tej sekcji należy kliknąć na 'Dodaj folder' elementu. Wyświetli się okno wyboru folderu.

3) Po wybraniu folderu pojawi się pasek informacyjny o prawach dostępu do folderu.

Screenshot of access rights infobar

4) W rezultacie można zobaczyć dwa pierwsze elementy poziomu w okienku wyboru pliku panelu Źródło. W moim przypadku był to localhost: witryna 9080 i devtools lokalny folder systemu plików. W tym momencie musisz utworzyć mapowanie między plikami lokacji i lokalnymi plikami. Możesz to zrobić poprzez menu kontekstowe na pliku.

Mapping screenshot

To nie ma znaczenia, co plik mapowania, lokalny lub plik site.

5) w tym momencie devtools poprosi o ponowne uruchomienie. restart screenshot

Po DevTools restartu pokaże wpis folderu małpa w panelu plików i będzie obowiązywać wszystkie zmiany robisz do lokalnego pliku za każdym razem po naciśnięciu Ctrl + S lub Cmd + S na mac.

+2

Powinienem był wyjaśnić, że wykonałem wszystkie powyższe czynności i nadal nie działał, gdy korzystałem z "codeavengers.com" jako mojego serwera. ("codeavengers.com" jest mapowane na localhost w moim pliku hosts Windowsa). Kiedy zmieniłem na używanie localhost w moich adresach URL działało jak opisano powyżej. Jednak debugowanie JavaScript przestało działać. – Mike

+0

Później zdecydowałem się zainstalować rozszerzenie Chrome Tincr. Jak na razie działa świetnie. http://addyosmani.com/blog/lets-tincr-bi-directional-editing-and-saving-with-the-chrome-devtools/ – Mike

+0

Musisz dokładnie sprawdzić, czy mapowanie zostało zastosowane. Może się zdarzyć, że struktura witryny nie będzie odzwierciedlać struktury folderów lokalnych. Musisz również mieć dwa mapowania dla dwóch adresów URL, jeden dla localhost i drugi dla codeavengers.com. Jeśli devtools nie mogą zmapować lokalnego pliku do pliku lokacji, nie może ustawić w nim punktu przerwania. – loislo

4

Tylko korekta na temat tego, co powiedział loislo. "Działa obecnie tylko na kanarku."

Możesz wyzwolić wszystkie te funkcje eksperymentalne w stabilnych wersjach Chrome, wpisując na pasku adresu: Chrome: // flags.

Powiązane problemy